HTMLにYouTube動画を埋め込む方法|サイズ調整や自動再生などのパラメータ設定までを徹底解説！

生徒

ペン博士！HTMLにYoutube動画を埋め込みたいのですが、どうすればいいですか…

ペン博士

Youtube動画を埋め込む方法じゃな！パラメータを追加して自由にカスタマイズする方法を解説するからよーく聞いておくんだぞ！

生徒

ありがとうございます！

「YouTube動画をブログやサイトに埋め込みたい」「サイズ調整や自動再生、レスポンシブ対応の方法がわからない」そんなお悩みはありませんか？

本記事では、HTMLを使ったYouTube動画の埋め込み方法から、パラメータで自在にカスタマイズする手順までをわかりやすく解説します。読み終えるころには、サイトに最適な形で動画を設置し、見やすく効果的なコンテンツを作れるようになるでしょう。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

橋本さん
将来に繋がるスキルを身に付けたいと考え、プログラミングに出会う。在学中の大学ではプログラミングの講義がなかったため、独学で学習していたが、限界を感じWithCodeに入学を決意。短期集中カリキュラムでプログラミング学習に打ち込んだ結果、見事卒業テストに合格し、案件を勝ち取りました。現在は、新たな言語の習得に向けて学習を継続しながら就職活動に向けて準備を行っています。

詳しくはこちらの記事をご覧ください。

あわせて読みたい

【学生さん必見】大学生ながら案件を完走！案件を経験した後の活動状況もお聞きしました！ ペン博士！大学生ながら案件をこなした方がいるって聞いたんですけど本当ですか？ うむ、本当じゃ。わしが運営しておるプログラミングスクールの受講生じゃ。そして、そ...

橋本さんの主な制作実績はこちら

創業時の新規HP制作

株式会社hado 様

HTMLにYouTube動画を埋め込む方法

ホームページにYouTube動画を埋め込むことで、文章や画像だけでは伝えきれない情報をわかりやすく届けることができます。ここではYouTubeの「埋め込みコード」を使った基本的な設置方法を紹介します。WordPressはもちろん、HTMLで作られた多くのページに対応可能な方法です。

STEP

埋め込み対象のYouTube動画にアクセスし、
「共有」をクリック

STEP

「埋め込み」をクリック

STEP

埋め込みコードをコピー

STEP

埋め込みコードを貼り付けて完了

埋め込むYouTube動画にパラメータを追加する方法

ペン博士

ここでは、YouTube動画の埋め込みURLにパラメータを追加する方法を紹介するぞ！サイズの変更や自動再生、ループ再生など、さまざまなカスタマイズができるんじゃ。

動画のサイズを変更する

埋め込みコードの width（横幅）と height（縦幅）を編集することで、表示サイズを自由に調整できます。YouTube動画の場合は、縦横比が16:9になるよう設定しましょう。ショート動画は9:16が適切です。

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/IqKz0SfHaqI?
　si=53TPFvAsme7xZjSR"
  title="YouTube video player" frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media;　
　gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

実装結果