Youtubeなど埋め込み動画をスマホ表示用に可変サイズにする

Youtubeなどの動画を埋め込むとき、動画のページで表示サイズを決めてからiframeタグを取得します。そのままPC用のサイトに貼り付ければとても見やすいです。でもレスポンシブでスマホに表示すると、サイズが固定されたままなので、動画の端がスマホの画面からはみ出ることになります。そこでCSSを使って、表示する端末の画面幅に合わせてサイズが可変する埋め込み動画に変更します。 コード 埋め込みダグ YouTubeなら動画の埋め込みタグなら、このように取得できます。このとき動画のサイズを決めますので、このままウェブサイトやブログに貼るとサイズが固定されてしまいます。これをcssで常に貼った場所いっぱいに広がるようにすれば、タブレットでもスマホでも見やすくなります。 ただし、画質の粗い動画だと広がることによって、逆に見づらくなることがありますので、注意が必要です。 html <div class=

[Hi32]

スニペットに登録。iframe側のheightは不要

[gaito777]

埋め込み動画のタブレット・スマホ表示はバッチリです。