HTML iframeでYouTube動画を埋め込む方法と注意点を初心者向けに解説
生徒
「先生、WebページにYouTubeの動画を直接見せたいときはどうしたらいいですか？」
先生
「それにはHTMLのiframeタグを使う方法が一番簡単です。iframeは“別のページをこのページの中に埋め込む枠”だと思ってください。」
生徒
「でも、自分のページに動画を置くわけじゃないんですよね？」
先生
「そうです。iframeを使うとYouTubeの動画をWebページ上で再生できるだけで、動画ファイル自体はYouTube側にあります。」
1. HTML iframeとは何か
iframeは、HTMLで別のWebページやコンテンツを埋め込むためのタグです。動画や地図、他のWebページを自分のサイト内で表示したいときに使います。iframeの中に表示するコンテンツはURLで指定します。初心者でも簡単にYouTube動画を表示できるので、とても便利です。
2. YouTubeの埋め込み用URLを確認する
YouTube動画をWebページに埋め込むには、動画の「共有」ボタンから「埋め込みコード」を取得するのが一番簡単です。ここで表示されるiframeのURLをコピーして、自分のHTMLに貼り付けます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube動画" frameborder="0" allowfullscreen></iframe>
3. iframeの基本的な書き方
iframeタグは閉じタグも必要ですが、動画だけを表示する簡単な書き方は次の通りです。widthとheightでサイズを指定し、srcに動画URLを入れます。
<iframe width="640" height="360" src="https://www.youtube.com/embed/動画ID" title="サンプル動画" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4. レスポンシブ対応のiframe
パソコンだけでなくスマートフォンやタブレットでも動画を見やすくするには、iframeをレスポンシブ化することが大切です。Bootstrapのクラスを使うと簡単に設定できます。
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/動画ID" title="レスポンシブ動画" allowfullscreen></iframe>
</div>
5. 埋め込み時の注意点
iframeで動画を埋め込む際には、以下の点に注意してください。
- 動画の所有者が埋め込みを許可しているか確認する
- ページの読み込み速度に影響する場合があるため必要な動画だけ埋め込む
- スマートフォンでの見やすさを考えてレスポンシブ対応にする
6. autoplayや制御を設定する方法
iframeではURLの後ろにパラメータを付けて動画の再生方法を制御できます。たとえば自動再生や字幕表示などです。初心者はまず以下のような簡単な設定から始めると良いでしょう。
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?autoplay=1&mute=1" title="自動再生動画" frameborder="0" allowfullscreen></iframe>
7. iframeでSEOやアクセシビリティを考える
iframe自体は検索エンジンに直接内容が評価されませんが、title属性で動画の内容を簡単に説明しておくとSEOやアクセシビリティに役立ちます。また、動画周りに説明文を入れると検索結果に表示されやすくなります。
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="商品紹介動画" frameborder="0" allowfullscreen></iframe>
<p>こちらの動画では、新商品の使い方や特徴をわかりやすく解説しています。</p>
こちらの動画では、新商品の使い方や特徴をわかりやすく解説しています。
8. まとめると
iframeを使えば、YouTube動画を簡単に自分のWebページに埋め込むことができます。基本は動画のURLをsrcに指定し、widthとheightでサイズを調整するだけです。さらにBootstrapのratioクラスを使えばスマホでも見やすいレスポンシブ表示が可能です。埋め込みの際は、動画の許可や読み込み速度、アクセシビリティに注意しましょう。
まとめ
今回はHTMLのiframeタグを使ったYouTube動画の埋め込み方法と注意点について詳しく解説しました。初心者でも簡単にWebページに動画を表示できるiframeは、単に動画を表示するだけでなく、スマートフォンやタブレットでも快適に閲覧できるようにレスポンシブ対応が重要です。動画を埋め込む際は、YouTubeの埋め込み用URLを正しく取得し、widthやheightで表示サイズを調整します。また、Bootstrapのratioクラスを使用することで、動画の比率を保ったまま画面幅に応じた自動調整が可能となります。
埋め込み時の注意点としては、動画の所有者が埋め込みを許可しているか確認すること、ページの読み込み速度に影響を与えないよう必要な動画だけを埋め込むこと、そしてアクセシビリティやSEOの観点からtitle属性や説明文を適切に設定することが挙げられます。iframeのURLにパラメータを追加することで、自動再生やミュート、字幕表示などの制御も可能です。これによりユーザーにより良い体験を提供でき、サイト全体の利便性を向上させることができます。
さらに、動画周りにテキストや見出しを追加することで検索エンジンが動画内容を理解しやすくなり、SEO対策としても有効です。動画の内容を簡潔に説明するtitle属性や、ページ内での解説文は検索結果に表示されやすくなります。iframeタグを使った動画埋め込みは、正しい使い方を理解すれば、ブログやWebサイトをより魅力的に、ユーザーにとって便利にする強力なツールとなります。
以下は、基本的なYouTube埋め込みのサンプルコードです。Bootstrapを使ってレスポンシブ対応した例も示していますので、実際のWebページでの利用イメージとして参考にしてください。
<div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/動画ID" title="サンプル動画" allowfullscreen></iframe> </div> 生徒
「先生、iframeで動画を埋め込むときにサイズだけじゃなくてレスポンシブ対応が大事ってことは理解できました。でも、SEOやアクセシビリティも考える必要があるんですね。」
先生
「その通りです。iframe自体は検索エンジンに動画内容が評価されませんが、title属性や周りの説明文をしっかり書くことで、検索結果に反映されやすくなります。」
生徒
「自動再生やミュートなどのパラメータも付けられると聞きましたが、どんな場合に使うといいですか？」
先生
「例えば、ページにアクセスしたときにユーザーがすぐに動画を見ることができるようにしたい場合や、説明動画を静かに再生したい場合などです。ただし、無理に自動再生にするとユーザー体験を損なうこともあるので注意してください。」
生徒
「なるほど。結局はユーザーの使いやすさを考えて、必要な動画だけを埋め込むことが大事なんですね。」
先生
「その通りです。iframeの基本的な使い方を理解して、サイズやレスポンシブ、SEOやアクセシビリティのポイントを押さえれば、自分のWebページをより魅力的にすることができます。」
生徒
「これで私も、自分のサイトに動画を埋め込んで、スマホでも見やすくて検索結果にも反映されやすいページを作れるようになりますね。」
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
