用图像覆盖 youtube 嵌入的视频，单击时隐藏图像并自动播放 [英] Overlay youtube embedded video with image, hide image when clicked and autoplay
问题描述
我想在我的页面中查看 YouTube 视频之前显示图像.有没有办法用 jquery 或 javascript 函数来做到这一点.
我想用我自己的图片覆盖它，点击后显示视频并自动播放，无需重新加载页面.
感谢您的帮助
问候朱迪
如果使用来自 YouTube 的 HTML5 iframe，上述内容将不起作用，因为视频将在后台播放，并且在单击图像之前设置了 autoplay=1.我改为使用 .append() 在点击图像后附加 iframe，这样视频只会在图像的点击事件后自动播放.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script><div id="ytapiplayer2" style="display:none;"><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();});
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.
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
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.
<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>
这篇关于用图像覆盖 youtube 嵌入的视频，单击时隐藏图像并自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
