用 youtube 视频替换图像

Posted 2023-05-07

【中文标题】用 youtube 视频替换图像

【英文标题】：Replace an image with a youtube video

【发布时间】：2011-08-17 19:23:22

【问题描述】：

我有一张图片，我想将图片链接到嵌入的 YouTube 视频，这样如果用户点击图片，它就会在图片原来所在的位置开始播放。关于如何实现这一点的任何想法？

谢谢，

大卫

【参考方案1】：

将嵌入的视频放在不可见的 div 中：

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

然后给img 一个ID：

<img id="videopic" src="videopic.jpg"  />

然后，在图像周围放置一个链接，指向一些隐藏图像并显示嵌入视频的 javascript：

<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
<img id="videopic" src="videopic.jpg"  />
</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"  />
</a>

【参考方案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"  ></object>
</div>
<img style="width:640px;height:390px;cursor:pointer;" src="thisPictureInsteadOfVideo.jpg" onclick="this.style.display='none';document.getElementById('hideThisUltraCoolVideoFromYou').style.display='block';" />

类似这样的:)