SWELLでYouTube埋め込みの上に大きな空白がある場合、ブロックの余白と、動画の縦横比を確保する領域を分けて調べます。この記事には2024年6月の表示記録を残していますが、現在の環境で同じ原因を再現したものではありません。
こうなると記事の見た目が崩れているように見えるので、解決したほうが望ましいです。
旧稿では全YouTubeブロックの疑似要素を一律に変更していました。標準の縦横比の確保にも使われる要素なので、原因確認なしの適用を推奨するコードは取り下げました。
SWELLでYoutube埋め込み動画の上部に隙間ができた時の解決方法
まず編集画面のリスト表示で、動画の直前に空の段落・スペーサー・余白設定がないか確認します。次に公開ページで動画の外側に空白があるのか、プレーヤー内に黒帯があるのかを切り分けます。動画内の黒帯を外側の余白用CSSで消そうとしないでください。
以下は過去に追加CSSを設定した画面です。現在の手順として同じCSSをコピーするものではありません。
旧CSSは .wp-block-embed-youtube .wp-block-embed__wrapper:before を display: inline!important にしていました。WordPressのレスポンシブ埋め込みでは、この疑似要素のpaddingで高さを確保する場合があります。高さだけを消すと動画領域がつぶれる可能性があるため、旧CSSを適用済みならバックアップ後にいったん外して比較してください。
検証環境で、YouTubeブロックを新しく1つ作って同じ動画URLを入れ、旧ブロックと比較します。遅延読み込みプラグインや追加CSSを使っている場合は、一つずつ影響を調べます。本番でまとめて停止するのではなく、変更前後を比較できる条件にしてください。
変更後はキャッシュを消し、PC・スマホ幅で動画領域の高さと再生を確認します。遅延読み込みを使う場合は、再生前と再生後の両方を確認します。
以下は当時の修正後の画面です。同じ表示が現在の環境で得られると保証するものではありません。
プラグインと独自CSSを切り分ける
こういった不具合はプラグインの影響がある場合もあります。
まずはプレーンのSWELLで再現できないか確かめましょう。
再現する場合はフォーラムに投稿して直してもらうのがベストです。
独自CSSが原因なら、該当ルールだけを修正します。新しい調整が必要な場合も、問題のあるブロックだけに追加クラスを付けて範囲を限定し、他の縦横比の動画を壊さないか確認します。改善しなければ変更を戻し、WordPress・SWELL・関連プラグインのバージョンと再現手順を添えて相談してください。
通常の16:9埋め込みと外側の余白を比べる
次はWordPress公式記事で紹介されている動画を、レスポンシブ対応のYouTube埋め込みとして表示した見本です。2024年の不具合を再現するための動画ではありません。16:9の動画領域の高さを消すCSSは使っていません。
動画の紹介元：WordPress公式記事。再生できない場合は、埋め込み許可や通信環境も確認してください。
| 空白の場所 | 比較するもの | 最初に行う修正 |
|---|---|---|
| 動画の外側・上部 | 直前の段落／スペーサーと動画ブロックの余白 | 不要なブロックだけを外すか、対象ブロックの余白を調整 |
| 動画を表示する枠全体 | 標準の縦横比設定と独自の高さCSS | 過去に追加した該当CSSを控え、外して比較 |
| プレーヤー内の黒帯 | 動画そのものの縦横比 | 外側の疑似要素を消さず、元動画を確認 |
| 再生前だけの空白 | 遅延読み込みで表示される仮画像と枠 | 検証環境で対象設定だけを切り替え、再生前後を比較 |
検証用の複製ページでは、動画の直前に高さ32pxのスペーサーを追加すると、動画領域の外側だけに空白が増えます。スペーサーを外すとその32px分が戻るか確認してください。動画の「小さい画面サイズに合わせてリサイズ」を有効にし、PCとスマホで枠の比率と再生を比較します。WordPress公式のYouTubeブロック設定で操作場所を確認できます。
公開画面の確認記録
まとめ
空白の場所を先に切り分け、独自CSSが原因なら該当ルールだけを直す。これが遠回りに見えて一番早い手順です。
遅延読み込みの切り分けは特定の画像の遅延読み込みを除外する方法、表示速度の全体確認はサイトが重い原因を調べる方法、他のカスタマイズはSWELLカスタマイズまとめにあります。
