HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

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=1YouTubeの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>