みかおば
こんにちは、HTML初心者のみかおばです😊
今回は、YouTubeなどの動画をHTMLに埋め込む方法を紹介します！
動画を直接ブログやサイトに表示したいときに使えるのが <iframe> タグ。
とても便利で、1行で表示できますよ〜！
🎥 <iframe> タグってなに？
<iframe> は「ページの中に別のページを埋め込む」タグです。
例えば、YouTubeの動画プレイヤーやGoogleマップなどを表示するときに使います。
📌「iframe＝インライン・フレーム」と覚えると◎
✅ YouTubeの動画を埋め込んでみよう
▶️ 基本のコード
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
🔹 動画ID には、表示したいYouTube動画のIDを入れます。
🔹 YouTubeの「共有」→「埋め込む」でコピーすればOK！
▶️ 具体例：公式チャンネルの動画
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
👇 表示結果：
（このようにYouTubeプレイヤーがそのまま表示されます）
💡 ポイントと注意点
| 項目 | 内容 |
|---|---|
width / height | 動画の表示サイズ（ピクセル） |
src | 表示するYouTube動画のURL（https://www.youtube.com/embed/動画ID形式） |
allowfullscreen | 全画面表示を許可する（入れておくのが一般的） |
frameborder="0" | 枠線なしで表示（最近はなくてもOKですが念のため入れることも） |
📝 よくあるQ&A
❓ YouTubeのURLをそのまま貼ってもダメ？
→ ただのリンクとして表示されるだけで、埋め込み表示にはなりません。
「埋め込みコード（iframe）」を使いましょう！
❓ サイズを変えるには？
→ width と height を変更すればOK！
スマホ対応を意識するなら CSSや aspect-ratio を使って調整する方法もあります（また別の回で解説予定）。
🔖 この回で出てきたタグ・属性
<iframe>srcallowfullscreenwidth/height
💬 まとめ
YouTubeの動画をHTMLページに埋め込むと、サイトの見栄えもぐっと華やかに！HTM<iframe> タグは、YouTubeだけでなくGoogleマップなどにも応用できますよ〜🎶
HTMLやデザインに興味がある方に、おすすめリンクです👇
📌 次回のテーマ
【第17回】HTMLでページ構造タグを使ってみよう（<header>・<main>・<footer>）
コメント