Truco Divi: Reproducción automática de vídeos de YouTube al pasar el cursor

cabecera divi

El módulo de vídeo de Divi es fantástico para mostrar tus mejores vídeos de YouTube en tu web, solo tienes que seleccionar un vídeo de YouTube, copiar su URL y pegarlo en la configuración del módulo.

¿Qué te parecería que se reprodujesen automáticamente cuando el usuario pasa el cursor sobre el vídeo?

Pues es muy fácil, solo tienes que añadir un código a la sección de administración de Divi → Opciones del tema → Integración → Agregar código al <head> de su blog, activando previamente la opción de «Habilitar código de la cabecera».

codigo cabecera divi

Pega el siguiente código como en la captura anterior:

<script>
jQuery(function($) {
var video_url;
$('.et_pb_video iframe').hover(function(){
$(this).data('src-orig', $(this).attr('src'));
$(this).attr('src', $(this).data('src-orig')+'&autoplay=1&mute=1');
}, function(){
$(this).attr('src', $(this).data('src-orig'));
});
}); 
</script>

¡Guarda los cambios y ya está!

Lo que conseguirás será que el visitante, al pasar el cursor por encima de tus vídeos de YouTube, estos se iniciarán automáticamente, y al quitar el cursor del vídeo se parará la reproducción.

Lo puedes ver en el siguiente vídeo…

 

Adicionalmente, el código también silencia el vídeo con el parámetro mute=1, por políticas de reproducción automática de YouTube, pero el usuario puede activar el sonido haciendo clic en el icono del altavoz.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(3 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

6 comentarios en “Truco Divi: Reproducción automática de vídeos de YouTube al pasar el cursor”

  1. Hola Fernando: Gracias por el post. Estos códigos aunque son sencillos, no se encuentran de forma fácil en internet. Adicionalmente tengo una pregunta relacionada: Cómo hacer para que en un video insertado de youtube no se pueda copiar la url (que lleva al sitio de youtube). He visto videos insertados que no tienen forma de copiar, pero no he logrado encontrar el código. Te deseo lo mejor.

  2. Buenas tardes Fernando.
    He hecho exactamente lo que has dicho, he copiado y pegado el código en la pantalla de head, y no consigo el resultado. ¿Qué puede ocurrir?
    Cuando dices habilitar el código de cabecera, te refieres a pinchar sobre activar y que se quede la palabra desactivar, ¿no es correcto?
    Independientemente de ésto, no me funciona. He probado con todas las opciones de activar y desactivar.
    Es el video que aparece en entretenimiento.
    Muchas gracias por anticipado.
    un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido