【コピペOK】グーテンベルクでYouTubeの比率を維持する方法

WordPressグーテンベルクエディタにおけるYouTube動画の比率を維持する方法をご紹介します。

たった13行のコードを、CSSにコピペするだけで、どんなデバイス幅で見たときもYouTubeの標準アスペクト比である16:9を維持することができます。

それではさっそく見てまいりましょう！

YouTube比率維持のCSS

結論。以下のコードを子テーマのstyle.cssに追記すれば完了です！

※Web制作者であれば、deafault.cssといった感じで初期設定CSSファイルに書いておくのもありですね。

/* ---------------------------- */
/* --- グーテンベルクのYouTube比率維持 --- */
/* ---------------------------- */
.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;
}

Web制作の仕事をしているコーダーさんなどには馴染み深いpadding-top:56.25%の指定が肝です。

この56.25という数字はどこから来ているのかというと、YouTubeの標準アスペクト比の16:9（横:縦）です。

計算方法は縦/横×100。つまり、9/16*100。これを計算すると、56.25となりますね！

次はこの記事！

ブログ運営に役立つプラグイン記事まとめ

【WordPress】管理画面の配色を自分オリジナルにカスタマイズする方法

GoogleマップをCSSでレスポンシブ対応させる方法