3

ウェブサイトを作成していて、YouTubeビデオを埋め込みたいです。私の先輩はYouTubeの通常のプレーヤーのレイアウトが嫌いなので、少しカスタマイズしています（ボタンなどはありません）。問題は、サイトページを開くと、YouTubeに画像（プレーヤーサイズ、私の場合は480p）が表示され、その画像が実際に破壊されることです。

YouTubeの埋め込みコードを取得し、その上に画像を表示する方法が必要です。画像をクリックすると、YouTubeに変わり、自動的に動画の再生が始まります。このようにして、ページを開いたときにその醜いプレビュー画像が表示されないようにすることができます。

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

4

3 に答える 3

4

ビデオを表示したい場所に画像付きのdivを配置します。

<div id="coverimageforplayer"><img class="introvideo" src="video-cover.jpg" width="800" height="450" /></div>

ここで、次のjqueryコードを追加します。

$('#coverimageforplayer').click(function() {
        var embedCode = '<iframe ...Your Youtube embed code></iframe>';
        $('#coverimageforplayer').html(embedCode);
    });

私にとっては魅力のように機能します。

于 2012-12-21T15:31:09.927 に答える
3

YouTubeは非表示の場合、ビデオを再生しないため、自動再生を1に設定して、divを非表示にしてから、jQueryを使用してカバーをビデオと「入れ替える」ことができます。ビデオが読み込まれ、自動再生されます。

jQueryの場合：

<div id="youtubeplayer" style="display:none;">
<!-- Player code with &autoplay=1 -->
</div>
<div id="coverimageforplayer"><img src="wherever.png" /></div>

<script type="text/javascript">
$('#coverimageforplayer').click(function() {
$('#coverimageforplayer').replaceWith($('#youtubeplayer').show());
});
</script>
于 2012-10-03T11:14:10.647 に答える
1

訪問者の大部分が実際に再生を開始しない場合は、img誰かがタグの1つをクリックするまで、ページにタグを（任意のカスタム画像を使用して）配置する方法を使用することをお勧めします。 YouTubeiframe埋め込みプレーヤー。そうすれば、実際に必要であることがわかっていない限り、事前にプレーヤーをロードする必要がなくなります。

YouTube Direct Liteコードベースでこれを行う例があります。これには、マウスを置いたときに「再生」アイコンをオーバーレイすることが含まれます。ライブデモはで見ることができます

http://ytdirectlite.appspot.com/static-min/submit.html

そのページの下部にある送信インターフェイスにログインする場合は、[マイYouTubeビデオ]タブに移動します。

それを処理するコードがいくつかありますが、最も関連性の高いビットは次のとおりです。

https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/load.js#71 https://code.google.com/p/youtube-direct-lite /source/browse/static/js/ytdl/player.js#17

于 2012-10-04T18:21:32.333 に答える