Haga clic en la imagen (pantalla de bienvenida) para reproducir YouTube insertados película

Question

Me preguntaba cómo hacer algo tan seguido:

Quiero tener una imagen que muestra una imagen gráfica, al hacer clic en esa imagen se puede desenvolver un youtube Película en el mismo marcador de posición. (para ser claro, no quiero mostrar el reproductor incrustado directamente, pero primero se puede hacer clic en una imagen)

Answer 1

puede hacer una división con video e imagen, ocultar el video (display:none), cuando se hace clic en la imagen, ocultarlo y mostrar el video.

Answer 2

Encontré esto a través de Google y necesitaba hacer esto no con una incrustación, sino con el nuevo estilo de iframe (relativamente) que YouTube tiene para HTML5. Encontré que faltaba la solución porque no diferenciaba los nodos de texto de los elementos (nextSibling de Firefox y nextSibling de IE). Además, cuando se hace clic en el video, el usuario debe hacer clic dos veces, una vez en la imagen y luego una vez en el reproductor de YouTube. Esto se soluciona con el indicador de reproducción automática en la URL de YouTube. El comportamiento final es correcta en Chrome, Firefox, Internet Explorer 7+, etc.

Aquí está mi solución final:

<script type="text/javascript"> 
    function actualNextSibling(el) { // needed to smooth out default firefox/IE behavior 
     do { el = el.nextSibling } while (el && el.nodeType !== 1); 
      return el; 
    } 
</script> 
<div onclick="actualNextSibling(this).style.display='block'; this.style.display='none'"> 
    <img src="splash.jpg" alt="splash" style="cursor: pointer" /> 
</div> 
<div style="display: none"> 
    <iframe width="440" height="248" src="//www.youtube.com/embed/9FOZEbEpyA8?rel=0&autoplay=1"frameborder="0" allowfullscreen></iframe> 
</div> 

Answer 3

Aquí es cómo hacerlo usando jQuery. Los ejemplos anteriores dados, todavía reproducían el video incluso cuando el contenedor estaba oculto.

Crear un envase para guardar la uña del pulgar:

<div id="video"></div> 

A continuación, puede estilo de la uña del pulgar en CSS con algo como esto:

#video { 
    display: block; 
    width: 320px; 
    height: 240px; 
    background: url(images/my_video_thumb.jpg) no-repeat top left; 
} 

... y luego desea eliminar el fondo y cree su iframe sobre la marcha usando jQuery con algo como esto:

$('#video').on('click', function() { 
    $(this).html('<iframe src="http://www.youtube.com/embed/abcdef12345?rel=0&autoplay=1" width="320" height="240" frameborder="0" allowfullscreen="true">').css('background', 'none'); 
}); 

Demostración: codepen (incluye VanillaJS y el ejemplo jQuery)

Answer 4

intentar algo como esto:

<img src="placeholder.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0"> 
$('img').click(function(){ 
var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>'; 
$(this).replaceWith(video); }); 

demostración aquí: http://jsfiddle.net/2fAxv/1/