CSS個別設定不要!レスポンシブデザインでYouTube動画を埋め込む方法

YouTubeの共有 > 埋め込む のコードをコピーしてブログやHPにそのままはりつけると、スマホで表示したときに動画が表示領域外にはみ出てしまったりする。

<div id="test" class="mgb40">
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="youtube動画のURL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
</div>

上記のように書けば、スマホでもPCでも16:9の比率で画面内に綺麗に表示される。

CSSを別ファイルにかかなくても、htmlのインラインに書いてるから大丈夫。

WordPressならURLをそのまま投稿画面に貼り付けたり、 ブロックエディターにYoutubeのURL貼り付けるだけでも綺麗になるけどな、通常は。

動作確認

何パターンか見ていこう

冒頭のコードで埋め込んだ動画

↑PCスマホ問わずに綺麗に表示されるはず

あれ！？なんか接続が拒否される

なんでやろ？配信元の動画が埋め込みを許可してないのか？

また調べとくわ。

youtubeの共有 > 埋め込む のパターン

WordPressの投稿画面にURLだけ貼ったパターン

↑PCスマホ問わずに綺麗に表示されるはず