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

我想在查看我的页面中的YouTube视频之前显示图像。有没有办法做到这一点与jQuery或JavaScript函数。使用图像覆盖youtube嵌入式视频，单击并自动播放时隐藏图像

我想用我自己的图片覆盖此图片，点击后显示视频并自动播放它，所有这些都不会重新加载页面。

谢谢您的帮助

问候朱迪

2011-02-09 brightmist.co.uk

如果使用来自YouTube的HTML5 iframe，则上述操作无法正常工作，因为在点击图像之前，视频将在自动播放= 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>

来源

2012-08-30 19:56:30

哇感谢迈克，这是好多了，但是我已经使用在视频DIV的iframe，而不是如在很多视频时，把更人性化 – 2013-03-31 19:56:21

对不起最后解决您的问题是不正确的，以及不，它不是，但太复杂，你想要的东西。

如果隐藏，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>

来源

2011-02-09 20:35:34 BrandonS

非常感谢布兰登及其这么简单:) – 2011-02-09 22:21:16

由于可以这样做使用JavaScript API很简单，我也与创建这种效果New iFrame Embedding模式（我觉得很甜）。这真的很简单

显示图像
单击时，你的iframe嵌入代码替换它（与“自动播放= 1”参数）。

来源

2011-02-09 22:09:38 ullmark

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

回答

相关问题