Avisos
Vaciar todo

[Resuelto] Problemas con videos YouTube embebidos  

Página 1 / 2
 
Walter
 Walter
Reputable 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
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter,

¿Cómo estás insertando los videos en tu web? ¿Mediante plugin? ¿Cuál utilizas?

Antes de meternos a modificar estilos CSS para tus requerimientos me gustaría que atendieras el problema de carga de contenido mixto en tu sitio web, te sugiero revisar el siguiente enlace -> https://guias.webempresa.com/preguntas-frecuentes/contenido-mixto-tras-activar-ssl-web/

ResponderCitar
Respondido : 05/09/2019 2:15 am

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

Walter
 Walter
Reputable Member

Hola,

Ante todo, he intentado mil veces resolver el problema de contenido mixto pero no logro hacerlo incluso ya he revisado la guia de ustedes que me acabas de enviar. Si me puedes hechar una mano con esto tambien, seria genial

Respecto de los videos, lo he insertado manualmente con el link que me da youtube y como quedaba muy mal use un código que encontre navegando.

Este es el codigo que use en css custimizado y luego llamé desde los posts

.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:99%;
height:99%;
}

Gracias

ResponderCitar
Respondido : 05/09/2019 3:00 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Agrega el margin-bottom:auto !important; a la clase rll-youtube-play img, tal como se muestra a continuación:

.rll-youtube-player img {
    margin-bottom: auto !important;
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}

Si lo estás haciendo directamente con el iframe que te proporciona Youtube entonces debería ser suficiente con agregar el autoplay:


he intentado mil veces resolver el problema de contenido mixto pero no logro hacerlo incluso ya he revisado la guia de ustedes que me acabas de enviar.

¿Podrías indicarme qué es lo que ya has realizado y no te ha funcionado? De inicio no veo instalado el plugin de SSL Insecure Content Fixer, tal como se indica en la guía de webempresa.

ResponderCitar
Respondido : 05/09/2019 5:26 am

Walter
 Walter
Reputable Member

Gracias. Ya lo pruebo y luego te comento
Paso a explicarte.
Estoy usando el iframe que me. Da YouTube.

Te copio los códigos para que los veas.

1. Acá funciona el autoplay pero no bien carga la pagina arranca el video (yo quiero que arranque cuando el usuario va leyendo el post y llega a ver el video

2. Aquí no anda el autoplay

div class="youtube-responsive-container">

Respecto del contenido mixto, en su momento instale el ssl content fixer y no había funcionando. Hoy lo volvi a activar y lo volví a correr. Podrías por favor decirme si solucionó el problema de contenido mixto?

ResponderCitar
Respondido : 05/09/2019 11:32 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola walter.

yo quiero que arranque cuando el usuario va leyendo el post y llega a ver el video

puedes añadir un retardo en segundos " &autoplay=1&start=120 " 120 sería el retardo de inicio en segundos.
Un ejemplo sería:

Aquí no anda el autoplay
No tienes añadido en autoplay en la URL del video.

Seria lo siguiente:

Hay contenido mixto en al carga de las fuentes que utiliza tu plantilla, es un problema de la plantilla que estas utilizando.

Contenido solo visible a usuarios registrados

Edita el archivo htaccess que encontrarás en la raíz de tu instalación y añade lo siguiente:

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

El código lo que realiza es forzar la carga de contenido inseguro con el protocolo http a https://....

Un saludo

ResponderCitar
Respondido : 05/09/2019 12:54 pm

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

Walter
 Walter
Reputable Member

Gracias Pepe, ya edité el htaccess y probé el autoplay.

Respecto de los videos que aparecen cortados el Thumbnail, sigo con el problema.
Tal vez entendí mal.
Lo que hice fue copiar este codigo en el csss custom
.rll-youtube-player img {
margin-bottom: auto !important;
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;

Hay algo mas que deba hacer?

ResponderCitar
Respondido : 05/09/2019 9:49 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter,

No veo en donde estés insertando el CSS que te indique. Podrías enviar una captura de pantalla del lugar donde estás insertandolo? Por favor.

Saludos.

ResponderCitar
Respondido : 05/09/2019 11:14 pm

Cursos Gratuitos WordPress

Walter
 Walter
Reputable Member

Lo agregué en el css custom.

Donde tenía que agregarlo?

ResponderCitar
Respondido : 05/09/2019 11:30 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter ,

Si, allí es el lugar indicado, solo que no esta cargando tu web ese código.

Tienes algún plugin de cache? Prueba eliminando el cache generado Y/o agrega el css en el archivo style.css de tu tema hijo.

Saludos.

ResponderCitar
Respondido : 05/09/2019 11:39 pm

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

Walter
 Walter
Reputable Member

Creo que ahora hizo efecto. Los videos se ven perfecto cuando reproduce, pero antes de comenzar la reproducción, sale cortado el thumbnail y no se lee todo el texto, tanto en versión movil como en versión escritorio, habrá forma de corregir este error?

Además, quiero que el tamaño sea del 100% en version movil y del 80% en versión escritorio (actualmente los cambios que haga aplican a ambas), me podras pasar un código para lograr que el tamaño en movil sea del 100 y en pc del 80%? @media only imagino que algo asi

muchas gracias

ResponderCitar
Respondido : 06/09/2019 12:50 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter,

¿Así como se muestra en la captura siguiente es como lo visualizas tu actualmente?

No veo texto cortado pero confírmame, quizás estoy entiendo mal. Respecto al tamaño del 100% en móvil y 80% en escritorio, ¿Te refieres al tamaño del video respecto al contenedor de Youtube o a todo el contenedor de Youtube respecto a la página web?

ResponderCitar
Respondido : 06/09/2019 1:20 am

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

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter,

Prueba con el siguiente CSS y me dices si es así como lo requieres:

@media (min-width: 768px)  {

.youtube-responsive-container {
    max-width: 80%;
}
}

@media (max-width: 768px)  {

.youtube-responsive-container {
    max-width: 100%;
}
}

Saludos.

ResponderCitar
Respondido : 06/09/2019 1:44 am
Walter
 Walter
Reputable Member

Yo lo sigo viendo mal
Ademas, lo que noto es que si pongo 80% el cuadro queda al 100 y el video queda al 80%, es decir, se ve el video mas chico que el fondo, queda como recuadrado.

Te voy a copiar todo mi codigo css a ver si puedes descubrir que hice mal

.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:85%;
height:85%;
}

.rll-youtube-player img {
margin-bottom: auto !important;
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}
@media (min-width: 768px) {

.youtube-responsive-container {
max-width: 90%;
}
}

@media (max-width: 768px) {

.youtube-responsive-container {
max-width: 100%;
}
}

gracias

ResponderCitar
Respondido : 06/09/2019 2:03 am

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter,

Agrégalo de la siguiente manera:

.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:auto;
overflow:hidden;
}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0; 
}

.rll-youtube-player img {
margin-bottom: auto !important;
bottom: 0;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}

@media (min-width: 768px) {
.youtube-responsive-container {
max-width: 90%;
}
}

@media (max-width: 768px) {
.youtube-responsive-container {
max-width: 100%;
}
}

Si no surte efecto vacía el caché de Varnish, utiliza otro explorador de internet y/o insértalo directamente en el archivo style.css que se encuentra en el directorio /wp-content/themes/wp-trust-child

ResponderCitar
Respondido : 06/09/2019 2:14 am
Página 1 / 2