HTML YouTube動画
HTMLでビデオを再生する最も簡単な方法は、YouTubeを使用することです。
ビデオ形式に苦労していますか?
ビデオをさまざまな形式に変換するのは難しく、時間がかかる場合があります。
より簡単な解決策は、YouTubeがWebページでビデオを再生できるようにすることです。
YouTube動画ID
動画を保存(または再生)すると、YouTubeはID(tgbNymZ7vqYなど)を表示します。
このIDを使用して、HTMLコードで動画を参照できます。
HTMLでYouTubeビデオを再生する
Webページでビデオを再生するには、次の操作を行います。
- 動画をYouTubeにアップロードする。
- 動画IDをメモします。
- Webページで
<iframe>
要素を定義します。 src
属性がビデオURLを指すようにします。width
属性とheight
属性を使用してプレーヤーの寸法を指定します- その他のパラメーターをURLに追加します(以下を参照)。
YouTube自動再生 + ミュート
YouTubeのURLにautoplay=1
を追加すると、ユーザーがページにアクセスしたときにビデオの再生が自動的に開始されるようにできます。ただし、ビデオが自動的に開始されるのは訪問者にとって迷惑です。
注:ほとんどの場合、Chromiumブラウザーは自動再生を許可しません。ただし、ミュートされた自動再生は常に許可されます。
autoplay=1
の後にmute=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>
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。