HTMLYouTubeビデオ
HTMLでビデオを再生する最も簡単な方法は、YouTubeを使用することです。
ビデオフォーマットに苦労していますか?
ビデオをさまざまな形式に変換することは、困難で時間がかかる場合があります。
より簡単な解決策は、YouTubeにWebページのビデオを再生させることです。
YouTubeビデオID
動画を保存(または再生)すると、YouTubeはID(tgbNymZ7vqYなど)を表示します。
このIDを使用して、HTMLコードでビデオを参照できます。
HTMLでYouTubeビデオを再生する
Webページでビデオを再生するには、次の手順を実行します。
- ビデオをYouTubeにアップロードする
- ビデオIDをメモします
<iframe>
Webページで要素を定義する- 属性
src
がビデオURLを指すようにします width
およびheight
属性を使用して、プレーヤーの次元を指定します- URLに他のパラメータを追加します(以下を参照)
例
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
YouTube自動再生+ミュート
autoplay=1
YouTubeのURLに追加することで、ユーザーがページにアクセスしたときに動画の再生を自動的に開始できます。ただし、ビデオを自動的に開始することは、訪問者にとって煩わしいことです。
注: Chromiumブラウザーでは、ほとんどの場合、自動再生は許可されていません。ただし、ミュートされた自動再生は常に許可されます。
mute=1
後に追加
autoplay=1
すると、ビデオの再生が自動的に開始されます(ただしミュートされます)。
YouTube-自動再生+ミュート
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
YouTubeプレイリスト
(元のURLに加えて)再生するビデオのコンマ区切りのリスト。
YouTubeループ
loop=1
ビデオを永久ループさせるために追加します。
値0(デフォルト):ビデオは1回だけ再生されます。
値1:ビデオは(永久に)ループします。
YouTube-ループ
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
YouTubeコントロール
controls=0
ビデオプレーヤーにコントロールを表示しないように追加します。
値0:プレーヤーコントロールは表示されません。
値1(デフォルト):プレーヤーコントロールの表示。
YouTube-コントロール
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>