26

私はたくさんの埋め込まれたYouTubeビデオを含むウェブサイトを持っています。現在、これらは同時にロードされるため、もちろん、最初にロードされたときにサイトの実行が非常に遅くなります。

ビデオiframeではなくプレースホルダー/スプラッシュ画面として画像を読み込むための最良の方法は何ですか？

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

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

4

1 に答える 1

44

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

<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します。

于 2012-12-05T14:46:00.190 に答える