用YouTube视频替换图像

Question

我有一个图像，我想将图像链接到嵌入的YouTube视频，例如，如果用户点击图像，它会在图片使用的地方开始播放成为。有关我如何完成此任务的任何想法？

谢谢

大卫

Answer 1

将嵌入的视频在一个div是无形的：

<div id="video" style="display: none;"> embedded video code here </div> 

然后给img一个id太：

<img id="videopic" src="videopic.jpg" alt="Video Picture" /> 

然后，在图片上放置一个指向隐藏图片的JavaScript的链接显示嵌入式视频：

<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);"> 
<img id="videopic" src="videopic.jpg" alt="Video Picture" /> 
</a> 

所以，完整的代码如下：

<div id="video" style="display: none;"> embedded video code here </div> 
<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);"> 
<img id="videopic" src="videopic.jpg" alt="Video Picture" /> 
</a> 

Answer 2

<div id="hideThisUltraCoolVideoFromYou" style="display:none;"> 
<object style="height: 390px; width: 640px"> 
<param name="movie" value="http://www.youtube.com/v/V4jZ_BV4MQ4?version=3&autoplay=1"> 
<param name="allowFullScreen" value="true"> 
<param name="allowScriptAccess" value="always"> 
<embed src="http://www.youtube.com/v/V4jZ_BV4MQ4?version=3&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object> 
</div> 
<img style="width:640px;height:390px;cursor:pointer;" src="thisPictureInsteadOfVideo.jpg" onclick="this.style.display='none';document.getElementById('hideThisUltraCoolVideoFromYou').style.display='block';" /> 

这样的事情:)