[wp]投稿本文のyoutube埋め込み調整

埋め込んだyoutube（iframe）はレスポンシブじゃない。

※ブロックエディタで埋め込む前提の話です。

経緯というか仕様というか
youtube埋め込みのレスポンシブ化の仕組み
wpに入れ込む方法
wpに入れ込む方法2

経緯というか仕様というか

Youtubeを投稿本文に埋め込んだ場合、通常だとレスポンシブ非対応の状態なのでスマホ表示で幅をぶち抜いたりすることがある。

うちのテーマ（Cocoon）はレスポンシブ対応。

うちの場合はこう。「埋め込みハンドラー」ってなんだよ・・・

<figure class="wp-block-embed is-type-rich is-provider-埋め込みハンドラー wp-block-embed-埋め込みハンドラー wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<div class="video-container"><div class="video"><iframe title="【ラスボス後編】ヒロ渡邉先生が伝授する究極の戦闘法とは・・？" width="1256" height="707" src="https://www.youtube.com/embed/GOZwHGs_TeU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div></div>
</div><figcaption>うちのテーマ（Cocoon）はレスポンシブ対応。</figcaption></figure>

よそだとこんな感じ。なんにも指定してなければこうなるはず。

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="【ラスボス後編】ヒロ渡邉先生が伝授する究極の戦闘法とは・・？" width="1256" height="707" src="https://www.youtube.com/embed/GOZwHGs_TeU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div></figure>

念の為、手を入れる前に各環境で確認して、状況を踏まえてから以下の内容を展開した方がいい。

youtube埋め込みのレスポンシブ化の仕組み

iframeのレスポンシブ化は親要素で領域を作ってiframeをはめ込む感じになる。

<div class="youtube">
    <iframe></iframe>
</div>

.youtube{
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    position: relative;
}
.youtube iframe{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

padding-topを％で指定するとwidth基準の長さになるので縦横比はここで調整。

これを適用するかんじ。

wpに入れ込む方法

cssで完結させる方法。

figure全般を指定すると画像とかで使用するときに詰むので振り分けて書く必要がある。上記のコードを踏まえると通常はfigureのclassに「is-provider-youtube」「wp-block-embed-youtube」があるから、それをトリガーにすればいい。

.is-provider-youtube.wp-block-embed-youtube .wp-block-embed__wrapper{
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    position: relative;
}
.is-provider-youtube.wp-block-embed-youtube .wp-block-embed__wrapper iframe{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

wpに入れ込む方法2

だけど、wpの仕様変更で段組みが変わったら嫌だなーってかんじで、どうにかしたい気もする。だから自動生成のclassに頼るんじゃなくて、自分で環境を構築したいなっていう。

functions.phpに追記すれば、iframeを.youtubeで囲う、みたいなことができる。

function iframe_in_div($the_content) {
    if ( is_singular() ) {
    $the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
    $the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
    }
    return $the_content;
}
add_filter('the_content','iframe_in_div');

書き出すとこんなかんじ。

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<div class="youtube"><iframe title="【ラスボス後編】ヒロ渡邉先生が伝授する究極の戦闘法とは・・？" width="1256" height="707" src="https://www.youtube.com/embed/GOZwHGs_TeU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
</div></figure>

ということはこういうことで

<figure>
    <div class="youtube">
        <iframe>

cssはこうなる

figure .youtube{
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    position: relative;
}
figure .youtube iframe{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

まあこれも問題はあるんだけどね。iframeを突っ込んだら強制的に.youtubeが追加されるわけで、だからGoogleマップとかを埋め込んでも同様の処理になる。

未来永劫Youtube以外貼るな、もしくは強制的にyoutubeと同じ縦横比で表示するってルールはあまりにもな話なので、figureに自動付与されるclassに頼ってしまったほうがいいんじゃない？って気持ち。