YouTubeを幅100%で埋め込む方法【レスポンシブ対応】

YouTubeを横幅100%でブログやWEBサイトに埋め込む方法が知りたい。

何か良い方法はないかなぁ？

こういった疑問に答えます。

本記事の内容

この記事を書いている僕はWEB制作で食べていて、実際に当ブログにも取り入れています。

本記事の方法は、同じiframeタグで囲まれている『ニコニコ動画』と『Googleマップ』にも使えるテクニックです。

また、ウィンドウ幅を変えても幅100%を維持するレスポンシブ対応もさせていきます。

ぜひコピペして使ってくださいー！

YouTubeを幅100%で埋め込む方法【レスポンシブ対応】

『追加CSS』にペーストするCSS

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem; /* YouTubeの下に余白をつける */
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

まず、上記コードを『追加CSS』にコピペしてください。

YouTubeのアスペクト比（縦横比）は16:9なので『9 ÷ 16 × 100』で56.25%になります。

また、margin-bottomで動画の下に余白をつけていますが、不要な方は削除してください（ここでは自テーマのpタグと同じ余白に設定しています）。

『テキストエディタ』にペーストするHTML

<div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/m_ZuOHx3NKQ" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

※『src=""』の中身は埋め込みたい動画によって変わります。

次に、ブログに埋め込みたいYouTube動画にアクセスします。

コピーしたコードを『テキストエディタ』にペーストします。

※『frameborder="0"』属性は現在廃止されているので削除してもOKです。

そのコードをiframe-wrapperクラスを付与したdivタグで囲む感じです。

<div class="iframe-wrapper">ココにコピーしたYouTubeの埋め込みコードを入れる</div>

こんな感じになります＼(^o^)／

もし、上記の方法で幅100%にはなったけど動画の下に大きな余白ができてしまったという方は、

お使いのテーマが自動で下記コードを生成してくれている可能性があります。

position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;

なので『追加CSS』から上記を削除してみてください。

ニコニコ動画を幅100%で埋め込む方法【レスポンシブ対応】

次に『ニコニコ動画』を埋め込む方法です。

アスペクト比はYouTubeと同じ16:9です。

ニコニコ動画にアクセスします。

<div class="iframe-wrapper">ココにコピーしたニコニコ動画の埋め込みコードを入れる</div>

こんな感じになります＼(^o^)／

Googleマップを幅100%で埋め込む方法【レスポンシブ対応】

最後に『Googleマップ』を埋め込む方法です。

モンキー・D・ルフィ島こと横須賀の無人島『猿島』を埋め込んでみましょう。

Googleマップにアクセスします。

<div class="google-map-wrapper">ココにコピーしたGoogleマップの埋め込みコードを入れる</div>

こんな感じになります＼(^o^)／（アスペクト比16:9ver.）

Googleマップはデフォルトではアスペクト比が4:3になっています。

この比率を守りたい方はGoogleマップ用のクラスを作りましょう。

『追加CSS』にペーストするCSS

.google-map-wrapper {
    position: relative;
    padding-bottom: 75%; /* アスペクト比4:3の場合 */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem; /* Googleマップの下に余白をつける */
}
.google-map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

クラス名とpadding-bottomを56.75% → 75%に変えただけです（450 ÷ 600 × 100）。

<div class="google-map-wrapper">ココにコピーしたGoogleマップの埋め込みコードを入れる</div>

こんな感じになります＼(^o^)／（アスペクト比4:3ver.）

スマホではこっちの方が見やすいかもしれませんね。

まとめ

YouTubeを埋め込みたいだけなら『URLを貼り付けるだけ』でもOKですが、横幅がバラバラでカッコ悪いですよね。

スマホでは、そもそもの幅が狭くて分からないですが、これでPCでも記事内の横幅いっぱいにYouTube動画を表示させることができました！

YouTube動画を複数埋め込む場合は下記の高速化テクニックもお試しください。