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
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/
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
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.
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?
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
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?
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.
Lo agregué en el css custom.
Donde tenía que agregarlo?
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.
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
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?
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.
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
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