Replace an image with a youtube video

问题

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

回答1:

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>

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

something like this :)

来源：https://stackoverflow.com/questions/5871489/replace-an-image-with-a-youtube-video