Youtubeの動画を埋め込むことは多いと思います。

iframeのコードをそのままコピーするので、スマートフォンで見ると横幅が大きすぎてはみ出てしまう。。。

美しくないですよね。

どんな画面サイズでも縦横比率をCSSで設定できます。

HTML

<iframe class="youtube" src="https://www.youtube.com/embed/iI1MV7jDDno" frameborder="0" allowfullscreen></iframe></div>

CSS

iframe.youtube {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

aspect-ratioで簡単に実装できます。

MDN Web Docs

aspect-ratio - CSS: カスケーディングスタイルシート | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio

aspect-ratio は CSS のプロパティで、ボックスの推奨アスペクト比を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。