[Resuelto] Problemas con videos YouTube embebidos  

Espectacular Pepe ha funcionado perfectamente. Gracias.

Sin embargo no logro que el primer video arranque solo.

Además hago una nueva consulta. El nivel del audio es bastante bajo (solo cuando se reproduce el video dentro la mi página) ya que desde YouTube se oye muy bien.

Alguna idea?

Hola

Con respecto a la reproduccción automática, deberías bastar con un autoplay, envíanos el código exacto que has usado para insertar el video de Youtube, es posible que haya habido algún error de sintaxis.

Has agregado algún código de cabeceras de seguridad ya sea en .htaccess o functions.php ?, ya que esto igual podría bloquear algún elemento.

Saludos.

Gracias ante todo.
Te cuento el problema que veo:
El Video si se reproduce solo pero sólo cuando ingreso a la pagina conectado como administradot (con la sesion iniciada en wordpress) Yo estoy usando VANISH, tendrá algo que ver?

Además, se generó un espacio en blanco enorme debajo de los videos (acabo de ver el html del post y no hay nada que lo justifique

Te copio el código del video que estoy usando para el autoplay

Aca te copio el código de todo el htaccess y functions.php

RewriteEngine On
RewriteCond %{ENV:HTTPS} !on [NC]
RewriteCond %{HTTP_HOST} ^estudiowls.com.ar$ [OR]
RewriteCond %{HTTP_HOST} ^estudiowls.com.ar$
RewriteRule ^(.*)$ https://estudiowls.com.ar/$1 [R=301,L]
# BEGIN WP Rocket v3.2.2
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset UTF-8
# Force UTF-8 for a number of file formats

AddCharset UTF-8 .atom .css .js .json .rss .vtt .xml

Header always set Content-Security-Policy "upgrade-insecure-requests;"

# FileETag None is not enough for every server.

Header unset ETag

# Since we’re sending far-future expires, we don’t need ETags for static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None

Header set X-Powered-By "WP Rocket/3.2.2"
Header unset Pragma
Header append Cache-Control "public"
Header unset Last-Modified

Header unset Pragma
Header append Cache-Control "public"

# Expires headers (for better cache control)

ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 4 months"
ExpiresByType image/png "access plus 4 months"
ExpiresByType image/jpeg "access plus 4 months"
ExpiresByType image/webp "access plus 4 months"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

# Gzip compression

# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers

SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s*,?s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI
.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g|mp4|webm|webp|pdf)$ no-gzip dont-vary

# Compress all output labeled with one of the following MIME-types

AddOutputFilterByType DEFLATE application/atom+xml
application/javascript
application/json
application/rss+xml
application/vnd.ms-fontobject
application/x-font-ttf
application/xhtml+xml
application/xml
font/opentype
image/svg+xml
image/x-icon
text/css
text/html
text/plain
text/x-component
text/xml

Header append Vary: Accept-Encoding

# END WP Rocket

SetHandler application/x-lsphp70

RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php56” package as the default “PHP” programming language.

AddHandler application/x-httpd-ea-php56 .php .php5 .phtml

# php -- END cPanel-generated handler, do not edit

Y aca el codido del functions

<?php

/**
* add child styles.
*
* @author FOX
* @since 1.0.0
*/
function theme_enqueue_styles()
{
$parent_style = 'cmssuperheroes-style';

wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array(
$parent_style
));
}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

/**
* load vc template dir.
*
* @author FOX
* @since 1.0.0
*/
if (function_exists("vc_set_shortcodes_templates_dir")) {
vc_set_shortcodes_templates_dir(get_stylesheet_directory() . "/vc_templates/");
}

Gracias!

Hola Walter,

Modifica la propiedad padding-bottom de la clase.youtube-responsive-container cambiando el valor a 0px, de tal modo que quede como a continuación se muestra:

.youtube-responsive-container {
    position: relative;
    padding-bottom: 0px;
    padding-top: 30px;
    height: auto;
    overflow: hidden;
}

Modifica el HTML del iframe de youtube por el siguiente:

Si no te funciona entonces puedes probar con el siguiente generador de iframes de youtube -> Enlace, elimina el caché de varnish y prueba con otro explorador, actualmente yo tampoco veo que se ejecute el autoplay con el iframe que estás insertando.

Saludos.

Hola, gracias por tu respuesta.

Antes de probarlo, encontré un código que supuestamente hace lo que necesito (reproduce el video cuando el visitante hace el scroll down en la pantilla y me gustaria pregunarles donde debería colocarlo en mi wordpress

#e1, #e2, #e3, #e4, #e5, # ytplayer{
height:390px; width:640px; display: block;
opacity: 0;
}

// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars : {
autoplay : 0
},
videoId: 'M7lc1UVf-VE'
});
}

$(window).scroll(function() {
$("iframe").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 200 ) {
$(this).css('opacity',1);
player.playVideo();
} else {
$(this).css('opacity',0);
player.stopVideo();
}
});
});

Hola Walter,

Si me lo permites no creo que funcione pero vamos a intentarlo...

El siguiente fragmento insértalo en el archivo header.php justo una línea antes de la etiqueta de cierre

#e1, #e2, #e3, #e4, #e5, # ytplayer{
height:390px; width:640px; display: block;
opacity: 0;
}



// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an  and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars : {
autoplay : 0
},
videoId: 'M7lc1UVf-VE'
});
}

$(window).scroll(function() {
$("iframe").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 200 ) {
$(this).css('opacity',1);
player.playVideo();
} else {
$(this).css('opacity',0);
player.stopVideo();
}
});
});

Nota: Recuerda crear una copia de seguridad del archivo header.php antes de editarlo

El siguiente fragmento debes insertarlo dentro del contenido de la pagina donde lo vas a mostrar pero no como texto normal, si no como fragmento html.

Some element 1
Some element 2
Some element 3
Youtube player here
Some element 4
Some element 5

Saludos.

Tenias razón. Ese código que encontré no funcionó.

Pero tampoco logro que funcione el autoplay con la modificación que sugeriste ni con el link para generar el iframe.

Le podrás echar un vistazo?

Hola

Parece que el autoplay ya no es válido cuando se inserta un video de Youtube, al menos que este en mute o sin sonido, revisa el siguiente artículo en donde tratan este tema.

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Contenido solo visible a usuarios registrados

Podrías probar con el código embebido inicial pero agregando mute

Saludos.

Gracias, ahora entiendo al menos por que no podia lograr el autoplay.
No obstante, te cuento que el autoplay si funcionaba cuando abria el post con el wp-admin activo... no tendría algo que ver el uso del vanish?

Ademas, noto que debo hacer dos veces click en los videos para que se reproduzca, lo podras ver por favor?

Saludos Walter,

Disculpa el retraso pero tuve que realizar pruebas para poder tener certeza de ofrecerte una solución efectiva.

Prueba con el plugin -> https://wordpress.org/plugins/youtube-embed-plus/

Una vez instalado dirígete a "yputube free", elemento que verás en el menu vertical izquierdo del backend de Wordpress. Después dirígete a Defaults -> Marca la opción de Autoplay.

Revisa la documentación del plugin para que sigas las isntrucciones para incrustar el video.

He probado con Chrome y Opera y funciona el autoplay correctamente.

Respecto a varnish, si tiene que ver, una vez que configures e incrustes el video vacía el caché generado y prueba.

Saludos.

Muchas gracias, lo estoy configurando y probando para ver si funciona... graciasss

Anduvo perfecto ese plugin, hace todo, lo hace responsive, tiene autoplay aunque costó configurarlo porque se disparaban todos los videos del mismo post en autoplay y el plugin aclara que seguramente el autoplay no va a funcionar con futuras actualizaciones de los exploradores de internet y con los moviles por lo que veo no funciona (por los cargos de 4G que genera.

Pero 10 puntos, muchas gracias por la dedicación