youtube - 画像を YouTube 動画に置き換える

Question

画像があり、ユーザーが画像をクリックすると、画像があった場所で再生が開始されるように、埋め込まれた YouTube ビデオに画像をリンクさせたいと考えています。これを達成する方法について何か考えはありますか？

ありがとうございました、

デビッド

Answer 1

埋め込まれたビデオを非表示の 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>

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

このようなもの ：）