用图像覆盖youtube嵌入式视频，单击并隐藏图像并自动播放 [英] Overlay youtube embedded video with image, hide image when clicked and autoplay
问题描述
我想在查看页面上的youtube视频之前先显示图像. 有没有办法用jquery或javascript函数来做到这一点.
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.
谢谢您的帮助
问候 朱迪
推荐答案
如果使用YouTube上的HTML5 iframe，则上述操作将不起作用，因为在单击图像之前，视频将在背景下以autoplay = 1设置播放.相反，我使用.append()在点击图片后追加了iframe，因此视频只会在点击图片事件后自动播放.
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屋！
