web-dev-qa-db-ja.com

YouTubeビデオにスプラッシュスクリーン/プレースホルダー画像を追加する方法

私は多くの埋め込みYouTube動画を含むウェブサイトを持っています。現在、これらは同時に読み込まれるため、最初に読み込まれたときにサイトの実行が非常に遅くなります。

ビデオiframeではなくプレースホルダー/スプラッシュスクリーンとして画像をロードする最良の方法は何ですか？

画像をYouTube iframeに置き換える必要がありますクリックされた場合のみ（これは要求された場合にのみロードする必要があります）。これにより、Webサイトのファイルサイズが大幅に削減されます。以前に同様の質問をいくつか見つけましたが、CSSとjQueryを使用してビデオの可視性を変更することを推奨しているようです。この場合、動画プレーヤーはバックグラウンドで読み込まれるため、これは機能しません。

私はどんな助け/提案にも感謝します。

javascriptjqueryhtmlcssyoutube
24
Stuart

それはかなり簡単なはずです、このようなことを試してください：

<img src="placeholder.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">

$('img').click(function(){
    var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).replaceWith(video);
});

デモ： http://jsfiddle.net/2fAxv/1/

YouTube動画の場合、画像をクリックしたときに再生する場合は、URLに&autoplay=1を追加します。

42
Wesley Murch