jQuery 单击图像（启动画面）以播放嵌入的 Youtube 电影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8492239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click on image (splashscreen) to play embedded Youtube Movie
提问by Ronald Wildschut
I Was wondering how to make something as followed:
我想知道如何制作如下内容：
I want to have an image that displays a splash image, clicking on that image it will play a youtube Movie in the same placeholder. ( to be clear I don't want to show the embedded player directly but first a clickable image)
我想要一个显示初始图像的图像，单击该图像它将在同一占位符中播放 youtube 电影。（明确地说，我不想直接显示嵌入式播放器，而是首先显示可点击的图像）
回答by Brand Provoke
Try something like this:
尝试这样的事情：
<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 here: http://jsfiddle.net/2fAxv/1/
演示在这里：http: //jsfiddle.net/2fAxv/1/
回答by stldoug
Here's how to do it using jQuery. The previous examples given, still played the video even when the container was hidden.
下面是如何使用 jQuery 做到这一点。即使容器被隐藏，前面给出的示例仍然播放视频。
Create a container to hold your thumbnail:
创建一个容器来保存您的缩略图：
<div id="video"></div>
Then you can style your thumbnail in CSS with something like this:
然后，您可以使用以下内容在 CSS 中设置缩略图样式：
#video {
display: block;
width: 320px;
height: 240px;
background: url(images/my_video_thumb.jpg) no-repeat top left;
}
...and then you want to remove the background and create your iframe on the fly using jQuery with something like this:
...然后您想删除背景并使用 jQuery 动态创建您的 iframe，如下所示：
$('#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(includes VanillaJS and jQuery example)
演示：codepen（包括 VanillaJS 和 jQuery 示例）
回答by Kyle Falconer
I found this through Google and needed to do this not with an embed, but with the new (relatively) iframe style that YouTube has for HTML5. I found the solution to be lacking in that it did not differentiate text nodes from elements (firefox's nextSibling and IE's nextSibling). Also, when the video is clicked, the user needed to click twice, once on the image, then once on the YouTube player. This is fixed with the autoplay flag in the YouTube URL. The final behavior is correct in Chrome, Firefox, IE 7+, etc.
我是通过 Google 找到的，并且需要使用 YouTube 为 HTML5 提供的新（相对）iframe 样式而不是嵌入来执行此操作。我发现缺少解决方案，因为它没有将文本节点与元素（firefox 的 nextSibling 和 IE 的 nextSibling）区分开来。此外，当点击视频时，用户需要点击两次，一次在图像上，一次在 YouTube 播放器上。这是通过 YouTube URL 中的自动播放标志修复的。最终行为在 Chrome、Firefox、IE 7+ 等中是正确的。
Here is my final solution:
这是我的最终解决方案：
<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>
回答by Nick Shvelidze
you can make a div with both video and image, hide the video (display:none),
when the image is clicked , hide it and show the video.
您可以使用视频和图像制作一个 div，隐藏视频 ( display:none)，当单击图像时，隐藏它并显示视频。
