CocoonでYouTubeショート動画を縦長表示【埋め込みコード／CSS】
WordPressのCocoonテーマでYouTubeショート動画を縦長の比率（縦型9:16動画）のまま表示するための埋め込みコードとCSSです。
動画前（上）の余白が大きめだったので、その部分の余白を抹消するスタイルを含んでいます。
特徴
・YouTubeショートの画面比率をiframeの縦横比（9:16）で維持
・PCは横幅320px〜400pxに制限しつつ表示（比率的に縦が画面長を越えない制御）
・スマホは画面幅いっぱいに表示（9:16なので縦的にも全表示になる考え）
・動画直前の段落（pタグ）の下余白を消す
※実際の本CSSの振る舞いはショート動画を公開しているこちらのサイトで確認してください。
使い方
・WordPressの管理画面から 「外観 → テーマエディター → 子テーマの style.css 」 を開く
・以下のCSSコードをそのままコピーして追加で貼り付ける
・「ファイルを更新」ボタンを押して保存
・ブログ記事にYouTubeショートを以下参考にdivタグで囲んで埋め込む
<div class="s-youtube"> YouTubeで出力した埋め込みコード </div>
注意点
このCSSはCocoonテーマを前提に作っていますが、バージョンや環境により不具合が出る可能性があります。
また、すべてのスキンでは動作確認をしていません。表示等で問題が出た場合も責任は取りかねますので、各自の責任で設置・確認してください。
YouTubeショート動画を縦長表示用のCocoon対応CSSコード
/*********
Youtubeショート（9:16）Cocoon版
*********/
/* autoはCocoon標準ラッパー */
.s-youtube .video {
width: auto;
height: auto;
margin-right: auto; /* PC：左寄せ */
overflow: visible;
padding-bottom: 0;
}
/* iframe本体 */
.s-youtube iframe {
position: relative; /* 無いと表示されない */
display: block;
width: 100%; /* 必須 */
aspect-ratio: 9 / 16; /* Shorts比率設定 */
max-width: clamp(320px, 30vw, 400px); /* 横がPCで大きくなりすぎない指定最小320、最大400 */
border: 0;
}
/* スマホ対応（横幅100%） */
@media (max-width: 768px) {
.s-youtube .video,
.s-youtube iframe {
width: 100% !important;
max-width: 100% !important;
}
}
/* 動画上部の余白を抹消 */
.entry-content p + .s-youtube {
margin-top: 0;
}
.entry-content p + .s-youtube,
.entry-content p + .s-youtube .video-container,
.entry-content p + .s-youtube .video {
margin-top: 0;
padding-top: 0;
}