Bấm vào hình ảnh (Splashscreen) để chơi nhúng Youtube Movie

Question

tôi đã tự hỏi làm thế nào để làm một cái gì đó như sau:

Tôi muốn có một hình ảnh sẽ hiển thị một hình ảnh giật gân, nhấp vào hình ảnh mà nó sẽ đóng một youtube Phim trong cùng một trình giữ chỗ. (để rõ ràng, tôi không muốn hiển thị trình phát được nhúng trực tiếp nhưng trước tiên là hình ảnh có thể nhấp)

Answer 1

bạn có thể tạo một div với cả video và hình ảnh, ẩn video (display:none), khi hình ảnh được nhấp, ẩn nó và hiển thị video.

Answer 2

Tôi đã tìm thấy điều này thông qua Google và cần thực hiện điều này không phải bằng cách nhúng, nhưng với kiểu iframe mới (tương đối) mà YouTube có cho HTML5. Tôi tìm thấy giải pháp thiếu trong đó nó không phân biệt các nút văn bản từ các phần tử (nextSibling của firefox và nextSibling của IE). Ngoài ra, khi video được nhấp, người dùng cần nhấp hai lần, một lần trên hình ảnh, sau đó một lần trên trình phát YouTube. Điều này được khắc phục bằng cờ tự động phát trong URL YouTube. Các hành vi cuối cùng là đúng trong Chrome, Firefox, IE 7+, vv

Dưới đây là giải pháp cuối cùng của tôi:

<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

Dưới đây là làm thế nào để làm điều đó bằng jQuery. Các ví dụ trước được đưa ra, vẫn phát video ngay cả khi vùng chứa đã bị ẩn.

Tạo vùng chứa để giữ thumbnail của bạn:

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

Sau đó, bạn có thể tạo kiểu thumbnail của bạn trong CSS với một cái gì đó như thế này:

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

... và sau đó bạn muốn loại bỏ nền và tạo iframe của bạn khi đang di chuyển bằng cách sử dụng jQuery với một cái gì đó như thế này:

$('#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 (bao gồm VanillaJS và jQuery chẳng hạn)

Answer 4

Hãy thử một cái gì đó như thế này:

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

bản demo ở đây: http://jsfiddle.net/2fAxv/1/