HTML YouTube ビデオ

コース推薦：

HTMLにビデオを含める最も簡単な方法は、YouTubeを使用することです。

ビデオの形式に迷っていますか？

ビデオを別の形式に変換することは、困難で時間がかかることがあります。

もっと簡単な解決策は、YouTubeでウェブページにビデオを再生させることです。

YouTube Video Id

ビデオを保存（または再生）するとき、YouTubeはIDを表示します（例：ih1l6wb7LhU）。

このIDを使用して、HTMLコードでビデオを参照できます。

HTMLでYouTubeビデオをインクルード

  • ウェブページでビデオを再生するには、以下の手順を実行してください：
  • ビデオをYouTubeにアップロード
  • ビデオIDを記録 で定義 <iframe>
  • を 要素 src
  • 属性を使用してビデオのURLを指定 width および height プレイヤーのサイズを指定する属性
  • URLに他のパラメータを追加（以下を参照）

例

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

実際に試してみる

YouTube Autoplay + Mute

ユーチューブのURLにautoplay=1を追加することで、ユーザーがページにアクセスした際にビデオが自動で再生されます。しかし、自動再生は訪問者が不快に感じることがあります。

注意：注意：

多くのケースで、Chromium ブラウザは自動再生を許可しません。しかし、常にミュート状態での自動再生は許可されます。 autoplay=1 次に追加 mute=1、ビデオは自動再生（ミュート状態）で開始されます。

YouTube - オートプレイ + ミュート

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>

実際に試してみる

YouTube プレイリスト

再生リスト（オリジナル URL を除く）をカンマで区切って指定します。

YouTube ループ

追加 loop=1 ビデオは常にループします。

値 0（デフォルト）：ビデオは一度だけ再生されます。

値 1：ビデオはループします（永遠に）。

YouTube - ループ

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>

実際に試してみる

YouTube コントロール

追加 controls=0 ビデオプレイヤーにコントロールを表示しません。

値 0：プレイヤーコントロールが表示されません。

値 1（デフォルト）：プレイヤーコントロールが表示されます。

YouTube - コントロール

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>

実際に試してみる