wp-embed-aspect class CSS overview

gutenbergのoembedメディアに、レスポンシブなスタイルが、追加されているようです。

レスポンシブなスタイル?

レスポンシブ コンテナに、最もシンプルな例がありますが、ブラウザの大きさが変化したら、一定の縦横比を保って、縮小するボックスのことです。

youtubeのビデオなどを、このコンテナの中において、ブラウザ幅に合わせて表示するのに使います。

この縦横比をコントロールするためのクラスが、wp-embed-aspect クラスです。

WordPressのoembedは、ビデオだけでなく、インスタグラムなどの画像や、WordPressリンクなどもoembedなので、ちょっと複雑さがあります。

モバイル対応などで、このようなボックスを使っている人も少なくないかもしれないですね。これまで、レスポンシブなスタイルをサポートしていなかったグーテンベルグのブロックがサポートを始めたことで、

youtube等、oembedブロックですでにテーマで、oembed メディアにレスポンシブなスタイルを作ってある場合は、レイアウトが崩れるかもしれません。

3.9では、以下のようなスタイルが設定されているようなので、コンフリクトしないか確認しましょう。

WordPressの埋め込みリンクは、3.9現在以下のようなhtmlを生成します。

リンクを段落に、ペーストした場合

WordPress 埋め込みブロックにペーストした場合

youtube では、wp-has-aspect-ratio .wp-embed-aspect-16-9 他のクラスが追加されます。

instagram では、is-type-rich is-provider-instagram

インスタグラムは、画像、動画混用ですね、youtubeは、動画、メディアの種類によって、クラスが割り当てられているようです。


新着記事

コメントは受け付けていません