2011-02-09 14 views
2

私のページにYouTubeの動画を見る前に画像を表示したいと思います。 jqueryまたはjavascript関数でこれを行う方法はありますか?画像を埋め込んだ動画を埋め込み、クリックして自動再生すると画像が表示されない

これを自分のイメージでオーバーレイし、クリックしたときに、ビデオを表示して自動再生して、ページをリロードします。

は、私はあなたの問題への最後の解決策が間違っていた、よくありません、それはありませんでしたが、あまりにもあなたが望んでいた何のために複雑申し訳ありませんが、あなたの助け

よろしく ジュディ

答えて

4

YouTubeのHTML5 iframeを使用している場合、画像がクリックされる前にautoplay = 1に設定された動画がバックグラウンドで再生されるため、上記は機能しません。代わりに.append()を使用して画像をクリックした後にiframeを追加すると、動画のクリックイベント後に動画が自動再生されます。

<body> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

<div id="ytapiplayer2" style="display:none;"> 
</div> 

<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" /> 
<script type="text/javascript"> 
$('#imageID').click(function() { 
$('#ytapiplayer2').show(); 
$('#ytapiplayer2').append('<iframe width="1130" height="636" src="http://www.youtube.com/embed/YOURVIDEOCODEHERE?autoplay=1" frameborder="0" allowfullscreen></iframe>'); 
$('#imageID').hide(); 
}); 
</script> 
</body> 
+0

うわー感謝マイクこれは私がビデオの多くを入れたときに、よりユーザーフレンドリーです代わりとしてビデオのdiv内のiframeを使用しましたがはるかに優れています –

4

いただきありがとうございます。

youtube動画は非表示の場合再生されません。埋め込みコードを追加してautoplay = 1を設定しますが、divを非表示にしてから要素のjqueryフリップを行います。あなたは以下のコードをコピーし、それを実行した場合、それは動作するはずです(あなたはあなたのjQueryライブラリにそれを指すように持っている除く)

<body> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

<div id="ytapiplayer2" style="display:none;"> 
<object width="1280" height="745"> 
<param name="movie" value="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1"></param> 
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param> 
<embed src="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"></embed> 
</object> 

</div> 


<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" /> 
<script type="text/javascript"> 
$('#imageID').click(function() { 
$('#ytapiplayer2').show(); 
$('#imageID').hide(); 
}); 
</script> 
</body> 
+0

どうもありがとうございましたブランドンとその非常にシンプル:) –

3

これは、と私はこの効果をも作成したJavaScript APIのと非常に簡単に行うことができるのでNew iFrame Embeddingモード(これはかなり甘いです)。それは

  1. をクリックすると、(「自動再生= 1」パラメータを使用して)あなたのiframeの埋め込みコードに置き換え
  2. あなたの画像を表示するとても簡単です。
関連する問題