HTML レッスン9
iframe・埋め込み
YouTube、地図、外部コンテンツをページに埋め込もう
iframeとは？
<iframe>は 「inline frame」の略で、別のWebページをページ内に埋め込むための要素です。 YouTube動画、Googleマップ、ツイート、外部のWebアプリなどを自分のページに表示できます。
基本的な埋め込み
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview埋め込みの注意点
⚠ iframeは必ずtitle属性をつける（アクセシビリティ）
⚠ sandbox属性でセキュリティを制限できる
⚠ loading="lazy"で遅延読み込みしてパフォーマンス向上
⚠ 外部サイトはX-Frame-Optionsで埋め込みを拒否していることがある
⚠ レスポンシブにするにはaspect-ratioやCSSラッパーを使う