点击图像（闪屏）来播放嵌入YouTube视频

我想知道如何使事情如下：点击图像（闪屏）来播放嵌入YouTube视频

我想有一个显示开机画面，点击该图像上的图像就会起到一个YouTube电影在同一个占位符。（要清楚，我不想直接显示嵌入式播放器，但首先可点击图片）

来源

2011-12-13 Ronald Wildschut

你可以让一个div视频和图片，隐藏视频（display:none），点击图像时，隐藏它并显示视频。

来源

2011-12-13 16:07:01

已历经找到正确的脚本！ –

@RonaldWildschut你介意找到你找到的解决方案吗？ –

http://www.sitepoint.com/forums/showthread.php?579770-Embed-google-video-or-youtube-with-custom-thumbnail&p=4410479#post4410479 –

我通过Google发现了这一点，需要做的不是嵌入，而是使用YouTube针对HTML5的新（相对）iframe风格。我发现缺乏解决方案，它没有区分文本节点与元素（firefox的nextSibling和IE的nextSibling）。另外，点击视频时，用户需要点击两次，一次在图片上，然后一次在YouTube播放器上。这是通过YouTube网址中的自动播放标志修复的。最后的行为是在Chrome，火狐，IE 7+等正确

这是我最终的解决方案：

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

来源

2012-08-03 17:07:08

下面介绍如何使用jQuery做。前面给出的例子，即使容器被隐藏，仍然播放了视频。

创建一个容器来保存你的缩略图：

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

然后你可以用这样的风格CSS您的缩略图：

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

...然后你要删除的背景

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

演示：并使用jQuery像这样的东西飞创建的iframe： codepen（包括VanillaJS和jQuery的例子）

来源

2013-04-14 03:12:04 stldoug

尝试是这样的：

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

演示在这里：http://jsfiddle.net/2fAxv/1/

来源

2013-06-26 08:26:15

我希望它的作品在android和iphone上 –

点击图像（闪屏）来播放嵌入YouTube视频

回答

相关问题