【WordPress】GutenbergのYouTube埋め込みをレスポンシブに対応させる方法

こんちは。

WordPress5.0（恐らく）から新エディタ「Gutenberg」が登場しました。賛否両論のあるエディタですが、個人的にはHTML/CSSの知識がない人にとっては使いやすいエディタなのではないかなと思います。

さて、今回は Gutenberg でYoutubeを埋め込んだ際にレスポンシブ化させる方法をご紹介したいと思います。

YouTube埋め込み機能は便利だけど…

WordPressのYoutube埋め込み機能を使えばYouTubeのURLを入力するだけでブログにYouTubeの動画を埋め込むことができます。

便利ですが、レスポンシブに対応していないので少しCSSでカスタマイズする必要があります。

YouTube埋め込みで生成されるコード

エディタの埋め込み機能を使用した際に生成されるHTMLは、下記の様な内容です。

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
    <div class="wp-block-embed__wrapper">
        <iframe width="500" height="281" src="https://www.youtube.com/embed/oVVSZG8Uvnw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
</figure>

横500px 縦281pxの動画が挿入されるわけですね。functionを弄って出力される内容を変更する方法もありそうですが、今回はCSSを使ってスマートにレスポンシブ化させたいと思います。

WordPressテーマのstyle.cssに追記してレスポンシブ対応にする。

下記のコードをstyle.cssに追記してください。

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

これだけでレスポンシブ化工事完了です…。

CSSの知識がない人は何も考えずにコピペしておいてください。少しCSSは分かるけどpadding-top: 56.25%ってなんやね～～んって方に軽く説明します。

YouTubeの動画は16:9の比率です。これだけでピンと来た人もいるとは思いますが、横幅が100％ですので縦幅は56.25%(100% / 16 * 9)になるわけですね。

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

このCSSで.wp-block-embed__wrapperを比率が16:9のposition:relativeのブロックにし、

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

position: absolute、width: 100%、height: 100%にすることで iframe要素 が .wp-block-embed__wrapperにフィットするような形になるわけですね。

今回のテクニックは割りと使うので覚えておくと良いかもしれません！

ではまたの～。