ブログ

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

2020年7月16日

考える人

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

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

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

本記事の内容

  • YouTubeを幅100%、レスポンシブに埋め込む方法
  • ニコニコ動画を幅100%、レスポンシブに埋め込む方法
  • Googleマップを幅100%、レスポンシブに埋め込む方法

この記事を書いている僕は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タグと同じ余白に設定しています)。

外観 › カスタマイズ › 追加CSS

『テキストエディタ』にペーストする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です。

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

(動画の横にあるSNSアイコンの一番右の)共有 › プレーヤー埋め込みコード(デフォルト) › コードをコピーする

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

こんな感じになります\(^o^)/

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

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

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

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

(一番右の)共有 › 地図を埋め込む › HTMLをコピー

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

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

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

  • 大 800:600
  • 中 600:450
  • 小 400:300

この比率を守りたい方は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動画を複数埋め込む場合は下記の高速化テクニックもお試しください。

YouTube複数埋め込みの表示高速化と注意点【プラグインなし】

-ブログ
-, ,

テキストのコピーはできません。

© 2018 ONE PIECE THE BIBLE