jquery – 使用图像覆盖youtube嵌入式视频,单击时隐藏图像并自动播放

前端之家收集整理的这篇文章主要介绍了jquery – 使用图像覆盖youtube嵌入式视频,单击时隐藏图像并自动播放前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在我的页面中查看YouTube视频之前显示图像.
有没有办法用jquery或javascript函数来做到这一点.

我希望用我自己的图像覆盖它,当点击时,显示视频并自动播放它,所有这些都不会重新加载页面.

感谢您的帮助

问候
朱迪

解决方法

如果使用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>

猜你在找的jQuery相关文章