Remplacer une image par une vidéo YouTube

Question

J'ai une image, et je voudrais que l'image soit liée à une vidéo YouTube intégrée, de sorte que si l'utilisateur clique sur l'image, elle commence à jouer à l'endroit où l'image a été utilisée être. Des pensées sur comment je peux accomplir cela?

Merci,

David

Answer 1

Placez la vidéo intégrée dans un div invisible:

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

Ensuite, donnez le img un id aussi:

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

Ensuite, , mettez un lien autour de l'image pointant vers du JavaScript qui cache l'image et montre la vidéo intégrée:

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

Ainsi, le code complet serait:

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

quelque chose comme ça :)