埋め込みのYoutube動画をレスポンシブ対応

2025-03-10

Youtubeの動画を埋め込んだ記事をスマホで開いた時にiframeがはみ出していたのを修正しました。

PRにもあるのですが、下記のようにstyleを追加しました。

.markdown-preview iframe {
  width: 100%;
  max-width: 560px; /* デフォルトの埋め込み幅を再現しつつ、レスポンシブ対応 */
  aspect-ratio: 16 / 9;
  border: none;
}

加えて、Youtubeから埋め込みリンクを取得するとデフォルトでtagにwidthとheight属性が指定されているのでそちらを削除する必要があります。

親要素を突き抜けて右にはみ出ている

レスポンシブ対応で16:9を維持して親要素いっぱいまで広がって表示される