iniciar / reproducir el video de YouTube (iframe) incrustado al hacer clic en una imagen

Estoy intentando comenzar a reproducir un video de YouTube incorporado haciendo clic en una imagen. La idea es tener una imagen encima de un video, y cuando se hace clic en la imagen, se desvanece y comienza a reproducirse.

Estoy usando jquery para desvanecer la imagen y esperaba encontrar una forma de reproducir o hacer clic en el video usando jquery también.

El desvanecimiento está funcionando bien, pero no puedo descubrir cómo activar el video para reproducirlo. Lo hice funcionar en un par de navegadores configurando el video para que se reproduzca automáticamente y lo oculte, y luego se desvanece en el video cuando se hace clic en la imagen. En la mayoría de los navegadores, el video se reproducía automáticamente cuando se desvanecía, pero en Chrome comenzó a reproducirse automáticamente incluso cuando estaba oculto. Tampoco funcionó bien en iOS.

Como soy bastante nuevo en esto, ni siquiera estoy seguro de si lo estoy escribiendo al 100%, pero he intentado algo como esto sin éxito:

$('#IMAGE').click(function() { $('#VIDEO').play(); }); 

Entonces, ¿cómo hago para hacer que el video se reproduzca en una imagen? ¿Hay una manera de reproducir el video cuando se hace clic en la imagen, simplemente usando jquery?

Gracias de antemano.

La forma rápida y sucia es simplemente intercambiar el iframe con uno que tenga el valor de autoplay=1 usando jQuery.

El HTML

Marcador de posición:

 

Enlace de reproducción automática:

 Watch the video 

LA JQUERY

El receptor onClick que llama a la función

 jQuery('a.introVid').click(function(){ autoPlayVideo('VIDEO_ID_HERE','450','283'); }); 

La función

 /*-------------------------------- Swap video with autoplay video ---------------------------------*/ function autoPlayVideo(vcode, width, height){ "use strict"; $("#videoContainer").html(''); } 

Puedes hacer esto simplemente así

 $('#image_id').click(function() { $("#some_id iframe").attr('src', $("#some_id iframe", parent).attr('src') + '?autoplay=1'); }); 

donde image_id es su id de imagen en la que está haciendo clic y some_id es id de div en el que iframe también puede usar el iframe id directamente.

Para iniciar el video

 var videoURL = $('#playerID').prop('src'); videoURL += "&autoplay=1"; $('#playerID').prop('src',videoURL); 

Para detener el video

 var videoURL = $('#playerID').prop('src'); videoURL = videoURL.replace("&autoplay=1", ""); $('#playerID').prop('src',''); $('#playerID').prop('src',videoURL); 

Es posible que desee reemplazar “& autoplay = 1” con “? Autoplay = 1” en caso de que no haya parámetros adicionales

funciona tanto para vimeo como para youtube en FF y Chrome

Se supone que debes poder especificar un dominio que sea seguro para las secuencias de comandos. el documento api menciona “Como medida de seguridad adicional, también debe incluir el parámetro de origen en la URL” http://code.google.com/apis/youtube/iframe_api_reference.html src = “http://www.youtube. com / embed / J — aiyznGQ? enablejsapi = 1 & origin = mydomain.com “sería el src de su iframe.

Sin embargo no está muy bien documentado. Estoy intentando algo similar ahora mismo.

Ejemplo de iframe de youtube

  

El clic para reproducir el elemento HTML

 
Play

Código jQuery para reproducir el video.

 $('.videoplay').on('click', function() { $("#video")[0].src += "?autoplay=1"; }); 

Gracias a https://codepen.io/martinwolf/pen/dyLAC

Código HTML:-

 Play  

Código JQuery: –

 $('#playerID').click(function(){ var videoURL = $('#VdoID').attr('src'), dataplay = $('#VdoID').attr('data-play'); //for check autoplay //if not set autoplay=1 if(dataplay == 0 ){ $('#VdoID').attr('src',videoURL+'?autoplay=1'); $('#VdoID').attr('data-play',1); } else{ var videoURL = $('#VdoID').attr('src'); videoURL = videoURL.replace("?autoplay=1", ""); $('#VdoID').prop('src',''); $('#VdoID').prop('src',videoURL); $('#VdoID').attr('data-play',0); } }); 

¡Eso es!

Esto debería funcionar perfectamente solo copia este código div