山形を拠点に活動するフリーランスWEBデザイナーのサイト兼備忘録です

Gutenbergの埋め込みが寄せられない!を解決するCSSを考えてみた。

よし!解決!と思いきや…もう一つの落とし穴が…

さあ、これで寄せの問題が解決…と思いきや最後の最後に大きな落とし穴がまっていました。

Youtubeの埋め込みの左右が切れてる…

中央寄せや寄せ無しにしたときは問題ないのですが、左右に寄せた時にがっつり左右をぶち切られでしまっていたのです。これではかっこがつかない…

そこで思い出したのが、なにかが56.25%という数字。たしか非WordPressのサイトでYoutubeをレスポンシブにしたとき…ということで思い出したのが、ここ。

WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法 | HTML5でサイトをつくろう

ただし、この記事は4年以上も前に公開されたものなので、当然Gutenbergの仕様には対応していません。ならばそれに合わせて作ればいいじゃないか!と思い立って、先ほどの、3層構造の埋め込みのCSSからYoutubeのものだけをチョイスして作成!


.wp-block-embed-youtube > .wp-block-embed__wrapper{position:relative;padding-top:56.25%;}
.wp-block-embed-youtube > .wp-block-embed__wrapper iframe{position:absolute;width:100%;height:100%;top:0;right:0;}

狙い通りに寄せることができました!

好調モンテディオ山形、ホーム開幕戦で大宮アルディージャに勝利!

動画はJリーグ公式Youtubeから地元チームの快進撃をチョイスしてみました。


進化した埋め込みを最大限に生かそう。

このようにきちんとCSSを設定すれば埋め込みはページの中で生きてくるので、ちゃんと設定してあげましょう。

ただし、私自身もアカウントを持ってたり、アカウント無しで試せるメジャーなところしか試していませんので、もし他にもずれるのがあるよ!という指摘がありましたら、がんばって追記していきます。

キーワードタグ:

投稿日時:


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

※コメントは承認制となっています。管理人の承認を得て初めて掲載されます。
※コメントには以下の HTML タグと属性のみ使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください