HTML YouTube ビデオ

HTMLビデオ なし

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

ビデオ形式について混乱していますか?

ビデオをさまざまな形式に変換するのは難しく、時間がかかる場合があります。

より簡単な解決策は、YouTube にページ上のビデオを再生させることです。

YouTube 動画 ID

ビデオを保存 (または再生) するとき、YouTube では ID (例: ih1l6wb7LhU) が表示されます。

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

HTML 形式のプレミアム YouTube 動画

Web ページでビデオを再生するには:

  • 動画を YouTube にアップロードする
  • ビデオ ID をメモします
  • ページ内で <iframe> 要素を定義する
  • src 属性がビデオの URL を指すようにします
  • width 属性と height 属性を使用して、プレーヤーのサイズを指定します
  • URL にパラメータを追加します(以下を参照)

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

自分で試してみてください

YouTube Autoplay + Mute

ユーザーがページにアクセスしたときにビデオの再生を自動的に開始するには、YouTube URL に autoplay=1 を追加します。 ただし、ビデオが自動的に開始されると、訪問者が迷惑してしまいます。

注: Chromium ブラウザでは、ほとんどの場合、自動再生が許可されません。 ただし、常にミュートされた自動再生を許可してください。

autoplay=1 の後に mute=1 を追加すると、ビデオの再生が自動的に開始されます (ただしミュートになります)。

YouTube - Autoplay + Muted

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

自分で試してみてください

YouTube Playlist

再生するビデオのカンマ区切りリスト (元の URL を除く)。

YouTube loop

loop=1 を追加すると、ビデオが永久にループします。

値 0 (デフォルト): ビデオは 1 回再生されます。

値 1: ビデオは (永久に) ループします。

YouTube - Loop

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

自分で試してみてください

YouTube Controls

controls=0 を追加すると、ビデオ プレーヤーでコントロールが非表示になります。

値 0: プレーヤー コントロールは表示されません。

値 1 (デフォルト): プレーヤーのコントロールが表示されます。

YouTube - Controls

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

自分で試してみてください