Avisos
Vaciar todo

[Resuelto] Problemas con videos YouTube embebidos  

Página 2 / 2
 
Walter
 Walter
Estimable Member

Hola,

Estoy agregando videos embebidos de YouTube en mi página y tengo los siguientes problemas:

1. La imagen de inicio sale cortada (ver adjunto).

2. Me gustaría que el video tenga autoplay pero cuando el usuario llega al video (ahora arranca no bien carga la pagina).

3. Me gustaría hacer responsive el tamaño achicar al 70% el tamaño del video en version pc y lo mismo en versión móvil (el resultado actúal es que aparece enorme en pc y mal en móvil (al reproducir queda el fondo grande y el video corre en un recuadro más chico (70%).

En los widgets quedó perfecto, el problema está en los posts
Gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 05/09/2019 1:09 am
Walter
 Walter
Estimable Member

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?

ResponderCitar
Respondido : 06/09/2019 8:51 pm

Cursos Gratuitos WordPress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 06/09/2019 10:55 pm
Walter
 Walter
Estimable Member

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!

ResponderCitar
Respondido : 06/09/2019 11:42 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 07/09/2019 2:40 am
Walter
 Walter
Estimable Member

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();
}
});
});

Some element 1
Some element 2
Some element 3
Youtube player here
Some element 4
Some element 5
ResponderCitar
Respondido : 07/09/2019 7:46 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 07/09/2019 9:09 pm
Walter
 Walter
Estimable Member

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?

ResponderCitar
Respondido : 09/09/2019 10:22 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 09/09/2019 10:40 pm
Walter
 Walter
Estimable Member

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?

ResponderCitar
Respondido : 09/09/2019 11:00 pm

Cursos Gratuitos WordPress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 10/09/2019 1:21 am
Walter
 Walter
Estimable Member

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

ResponderCitar
Respondido : 12/09/2019 5:51 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Walter
 Walter
Estimable Member

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

ResponderCitar
Respondido : 12/09/2019 9:02 pm
Página 2 / 2