WordPressグーテンベルクエディタにおけるYouTube動画の比率を維持する方法をご紹介します。
たった13行のコードを、CSSにコピペするだけで、どんなデバイス幅で見たときもYouTubeの標準アスペクト比である16:9を維持することができます。
それではさっそく見てまいりましょう!
YouTube比率維持のCSS
結論。以下のコードを子テーマのstyle.cssに追記すれば完了です!
※Web制作者であれば、deafault.cssといった感じで初期設定CSSファイルに書いておくのもありですね。
style.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となりますね!
次はこの記事!
![ブログ運営に役立つプラグイン記事まとめ](https://yuyauver98.me/wp-content/uploads/2020/07/ブログ運営に役立つプラグイン記事まとめ-160x92.jpg)
![WordPressの管理画面の配色を自分オリジナルにカスタマイズ](https://yuyauver98.me/wp-content/uploads/2020/03/20200319-3-160x92.jpg)
![WordPressの管理画面の配色を自分オリジナルにカスタマイズ](https://yuyauver98.me/wp-content/uploads/2020/03/20200319-3-160x92.jpg)
![WordPressの管理画面の配色を自分オリジナルにカスタマイズ](https://yuyauver98.me/wp-content/uploads/2020/03/20200319-3-160x92.jpg)
![GoogleマップをCSSでレスポンシブ対応させる方法](https://yuyauver98.me/wp-content/uploads/2020/02/20200211-160x92.jpg)
![GoogleマップをCSSでレスポンシブ対応させる方法](https://yuyauver98.me/wp-content/uploads/2020/02/20200211-160x92.jpg)
![GoogleマップをCSSでレスポンシブ対応させる方法](https://yuyauver98.me/wp-content/uploads/2020/02/20200211-160x92.jpg)