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.

(3 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

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

Sobre el autor

10 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.

    1. Sin ver las tripas de la web pueden ser muchas cosas, a saber… 

      – Optimizaciones que aplacen la carga de JS
      – Combinado o minimizado de JS
      – Lazy loading de vídeos
      – Optimizaciones propias de Divi activas
      – Etc.

      Yo desactivaría todos los plugins para probar si es alguno primero.

      1. Pues apagué… WP Fastest Cache, WP Fastest Cache Premium, Asset CleanUp: Page Speed Booster, Asset CleanUp Pro: Page Speed Booster y Minify HTML.

        ¿Pero las optimizaciones de Divi las tienes apagadas también? Porque si es así… prefiero quitar el efecto a que Google me penalice a muerte sin optimizaciones 😀

        1. A ver, que tampoco es cuestión de tener todo sin optimizar. A este código solo le afectan optimizaciones relacionadas con JavaScript 😀

          De todos modos, por lo que listas, tienes exceso de plugins de optimización, y encima algunos hacen lo mismo que otros, así que puede haber exceso de optimización.

          Yo simplemente evitaría:
          – Optimizaciones relacionadas con aplazar la carga de JS
          – Relacionadas con combinar o minimizar JS
          – Relacionadas con vídeos

          Tanto en plugins como en Divi.

          El resto puedes dejarlas sin problema

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