Clicca sull'immagine (splashscreen) a giocare incorporato Youtube Movie

Question

mi chiedevo come fare qualcosa come segue:

voglio avere un'immagine che visualizza un'immagine spruzzata, cliccando sulla quell'immagine si giocherà un youtube Film nello stesso segnaposto. (per essere chiari, non voglio mostrare direttamente il player incorporato ma prima un'immagine cliccabile)

Answer 1

puoi div fare sia con il video che con l'immagine, nascondere il video (display:none), quando si fa clic sull'immagine, nascondilo e mostra il video.

Answer 2

Ho trovato questo tramite Google e avevo bisogno di farlo non con un embed, ma con il nuovo stile (relativamente) iframe che YouTube ha per HTML5. Ho trovato la soluzione mancante in quanto non differenziava i nodi di testo dagli elementi (nextSibling di firefox e IE di nextSibling). Inoltre, quando si fa clic sul video, l'utente deve fare clic due volte, una volta sull'immagine, quindi una volta sul player di YouTube. Questo problema è stato corretto con il contrassegno autoplay nell'URL di YouTube. Il comportamento finale è corretta in Chrome, Firefox, Internet Explorer 7+, ecc

Ecco la mia soluzione finale:

<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

Ecco come farlo utilizzando jQuery. Gli esempi precedenti forniti, hanno comunque riprodotto il video anche quando il contenitore era nascosto.

Creare un contenitore per tenere il vostro miniature:

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

Quindi è possibile lo stile la miniatura in CSS con qualcosa di simile:

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

... e poi si desidera rimuovere lo sfondo e crea il tuo iframe al volo usando jQuery con qualcosa del genere:

$('#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'); 
}); 

Demo: codepen (include VanillaJS e jQuery esempio)

Answer 4

provare qualcosa di simile:

<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); }); 

demo qui: http://jsfiddle.net/2fAxv/1/