jQuery 用图像覆盖 youtube 嵌入的视频，单击时隐藏图像并自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4949783/
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
Overlay youtube embedded video with image, hide image when clicked and autoplay
提问by brightmist.co.uk
I would like to display an image before viewing a youtube video in my page. Is there a way to do this with jquery or a javascript function.
我想在我的页面中查看 YouTube 视频之前显示图像。有没有办法用 jquery 或 javascript 函数来做到这一点。
I want to overlay this with my own image and when clicked, display the video and autoplay it, all wihtout reloading the page.
我想用我自己的图像覆盖它，单击时显示视频并自动播放，无需重新加载页面。
Thank you for your help
感谢您的帮助
Regards Judi
问候朱迪
回答by BrandonS
I am sorry the last solution to your issue was incorrect, well no it wasn't but too complicated for what you wanted.
很抱歉，您的问题的最后一个解决方案不正确，好吧，它不是您想要的，但太复杂了。
youtube videos will not play if hidden. so add your embed code and set the autoplay=1 but hide the div and then do the jquery flip on the elements. if you copy the code below and run it it should work (except you have to point it to your jquery library)
如果隐藏，youtube 视频将无法播放。所以添加你的嵌入代码并设置 autoplay=1 但隐藏 div 然后在元素上执行 jquery 翻转。如果您复制下面的代码并运行它，它应该可以工作（除非您必须将其指向您的 jquery 库）
<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<div id="ytapiplayer2" style="display:none;">
<object width="1280" height="745">
<param name="movie" value="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"></embed>
</object>
</div>
<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#imageID').hide();
});
</script>
</body>
回答by Mike Averto
If using the HTML5 iframe from YouTube, the above won't work as the video will play in the background with autoplay=1 set BEFORE the image is clicked. I instead used .append() to append the iframe after the click on the image so the video would only autoplay after the click event for the image.
如果使用来自 YouTube 的 HTML5 iframe，上述内容将不起作用，因为视频将在点击图像之前设置为 autoplay=1 的背景中播放。我改为使用 .append() 在单击图像后附加 iframe，因此视频只会在图像的单击事件后自动播放。
<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<div id="ytapiplayer2" style="display:none;">
</div>
<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#ytapiplayer2').append('<iframe width="1130" height="636" src="http://www.youtube.com/embed/YOURVIDEOCODEHERE?autoplay=1" frameborder="0" allowfullscreen></iframe>');
$('#imageID').hide();
});
</script>
</body>
回答by ullmark
As this could be done pretty easy with the javascript api I have also created this effect with the New iFrame Embeddingmode (which i find is pretty sweet). It's really simple
由于使用 javascript api 可以很容易地完成此操作，因此我还使用New iFrame Embedding模式（我发现它非常棒）创建了这种效果。真的很简单
- Show your image
- When clicked, replace it with your iframe embed code (with the "autoplay=1" parameter).
- 展示你的形象
- 单击后，将其替换为您的 iframe 嵌入代码（使用“autoplay=1”参数）。
