TECH I.S.

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に追加します(以下を参照)。

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>


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>



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細