HTMLにYouTube動画を埋め込む方法!ループ処理と自動再生の方法も解説

2024.01.04
htmlにYouTube動画を埋め込む方法!

「HTMLにYouTubeを埋め込むにはどうしたらいいんだろう?」
「HTMLにYouTubeを埋め込んだ動画をループ再生させたい」

上記のような方に向けて、今回WEBCAMP MEDIAではHTMLにYouTube動画を埋め込む方法について解説します。

  • YouTube動画を埋め込む手順
  • 自動再生する方法
  • ループ再生する方法

以上の項目について解説します。

この記事を読むことで、HTMLファイルにYouTube動画を埋め込む方法が理解できるので、ぜひチェックしてみてくださいね!

HTMLのiframeタグでYouTube動画を埋め込む

iframe(アイフレーム)は、HTML内に別のHTMLを読み込むことができるタグです。

YouTubeに公開されている動画にはifremeが組み込まれているので、そのデータをHTMLファイルにコピーすることで埋め込みできます。

YouTubeから埋め込み用のifremeを取得してHTMLに設置する方法を、順を追って解説します。

STEP1
STEP1
YouTube動画を開き
HTMLに埋め込みたいYouTube動画を開き、高評価・低評価ボタンの隣にある「共有」というボタンをクリック。
STEP2
STEP2
iframeタグの取得欄を開く
「共有」をクリックすると、共有先のSNSや共有用のURLが表示されます。
その中にある「埋め込む」というリンクをクリックしましょう。すると、YouTube動画の情報を取得できるiframeタグが表示されます。

STEP3
STEP3
iframeタグをHTMLに貼り付ける
表示されたiframeタグは、画面右下にある「コピー」ボタンを押すことでコピーできます。
STEP4
STEP4
HTMLファイルに埋め込む
コピーした情報をHTMLファイルに貼り付けると、下記のように動画を埋め込みできます。

埋め込んだYouTube動画を自動再生する方法

埋め込んだYouTube動画を自動再生するには、下記2つのHTML属性を利用します。

  • autoplay:指定したファイルを自動再生する属性
  • mute:指定したファイルをミュート(消音)状態にする

YouTube動画はミュート設定しないと自動再生されないという特徴があるので、autoplay属性と一緒にmute属性も指定します。

指定場所は、iframe内でYouTube動画の場所を指定しているsrc属性内にクエリとして設定します。

サンプルコード

src="https://www.youtube.com/embed/kzjbV7dxm7c?autoplay=1&mute=1"

クエリを入力するときは、YouTube動画の後ろに「?」を挟んで入力します。属性を複数指定するときは「&」で挟んで入力します。

埋め込んだYouTube動画をループ再生する方法

YouTube動画をループ再生するには、下記の属性を利用します。

  • loop:指定した動画をエンドレス再生する
  • playlist:再生する動画のIDを指定する

playlistで指定した動画をloop属性を使ってループ再生できます。指定方法は、iframeのsrc属性に指定しているURLの最後に指定します。

src="https://www.youtube.com/embed/kzjbV7dxm7c?loop=1&playlist=kzjbV7dxm7c"

上記コードの動画IDは「kzjbV7dxm7c」です。

playlistに指定する動画のIDは、URL内にある「embed」の後に指定されています。

まとめ

今回は、HTMLにYouTube動画を埋め込む方法について解説しましたが、いかがでしたでしょうか?

YouTube動画をHTMLに埋め込むには、動画に指定されているiframeタグの情報をコピペすることで埋め込みできます。

また、動画を自動再生するときはmute属性を使って消音にすること、ループ再生するときはplaylist属性に動画IDを指定することは忘れがちです。

動作しないときは入力忘れがないかチェックするとよいでしょう。

ぜひ参考にしてみてくださいね!

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5