用youtube视频替换图片 [英] Replace an image with a youtube video

问题描述

我有一张图片，我想将该图片链接到嵌入式YouTube视频，这样，如果用户单击该图片，它就会在图片所在的位置开始播放.关于如何实现此目标有任何想法吗?

I have an image, and I would like to make the image link to an embedded YouTube video, such that if the user clicks on the image, it starts playing in the place where the picture used to be. Any thoughts on how I can accomplish this?

谢谢

大卫

推荐答案

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

Place the embedded video in a div that is invisible:

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

然后也给img一个ID:

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

然后，将图像周围的链接指向一些JavaScript，该JavaScript隐藏该图像并显示嵌入式视频:

Then, put a link round the image pointing to some JavaScript which hides the image and shows the embedded video:

<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>

因此，完整的代码应为:

So, the full code would be:

<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>

这篇关于用youtube视频替换图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！