【WordPress】YouTubeの埋め込みレイアウトが崩れる【備忘録】

wordpress logo

WordPressの標準機能である「埋め込み」で記事に埋め込んでいる動画の上に大きな空白ができる。

環境

  • テーマ : ルクセリタス 3.6.0
  • WordPress : 5.2.2

暫定的な対策

参考にしたサイト

CSSの追加

上記を参考に追加CSSで既存CSSを上書きし、レイアウト変更。

外観→カスタマイズ→追加CSS

  • 親要素のclass .wp-block-embed__wrapper
  • 小要素のclass .i-video
.wp-block-embed__wrapper{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.i-video{
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

結果

PC、スマートフォン両方で大きな余白がなくなっていることが確認できた。

PC,OK

スマートフォン,OK

これでしばらく様子を見る。

情報に感謝。

コメントを閉じる

コメントを残す