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

本文是小编为大家收集整理的关于用Youtube视频替换图片的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

我有一个图像,我想将图像链接链接到嵌入式YouTube视频,以便如果用户单击图像,它将开始在图片以前的位置进行播放.关于我如何实现这一目标的任何想法?

谢谢,

大卫

推荐答案

将嵌入式视频放在看不见的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>

其他推荐答案

<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';" />

类似的东西:)

本文地址:https://www.itbaoku.cn/post/2091144.html

问题描述

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?

Thank you,

David

推荐答案

Place the embedded video in a div that is invisible:

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

Then give the img an id too:

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

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>

其他推荐答案

<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';" />

something like this :)