アスペクト比大事

今までなんとなくしか気にしていなかったアスペクト比。

今回仕事でお客さんのサイトにyoutubeをレスポンシブで埋め込んだのですが、右端だったり左端だったり下だったりに1pxほどの黒い線が出る・・・。そしてブラウザによって出方が違う。
なんぞ・・・。

動画自体のアスペクト比を確認したり、埋め込むと勝手に挿入されるvideoタグのbackground-colorを無理やり白にしてみたり、ボーダーを白で設定してみたりと3日ほど(こんなことに3日も悩むなんて自分でもあほだと思いますが、あるあるです・・・)ぐぐりまくり試行錯誤しましたが!

すっきり解決しました!!!私天才!!(ってできた時思うのもあるある)

や、みなさんはすでにご存じで私が知らなかっただけだとも思うのですが。

私がやってたことは
コンテナ幅は1140pxでpadding左右15pxとってるところに、16:9のyoutubeを100%で埋め込んでいたのです。
ということは、幅1110pxで表示されているわけです。
ということは、縦は624.375px。
この、中途半端な整数じゃないピクセル数がきっと悪さをしている!と3日目に気が付きまして、
16:9の比率で1110pxに近い数字で整数になる縦と横を指定すれば、うまくいくのでは??と思いまして、計算しようと思いましたが算数苦手なのでわからず、ぐぐったらとっても頼もしいサイト様を発見!

16:9の整数倍解像度一覧

https://lunatilia.wordpress.com/dtv/resolutions-ar-16to9/

ありがとうございます!!
1088*612で枠を作り、そこに100%で埋め込んだら、目論見通り黒い線は消えました!やったーーーーー!!!!
これでやっとすっきりごはんも食べれます。
お客さんにも怒られずに済みます。
(ちなみにレスポンシブなのでwidth:1088pxではなく、max-width:1088pxにしました。heightはautoで。)

ひさしぶりに煮詰まりからのスッキリ!でしたので、忘れないためにもブログに書いておきます。もしかしたら同じように悩んでいる人がいて、ここを見るかもしれない・・・・。どうぞ役立ててください。

それでは、まだまだコロナ騒動おさまりませんが、負けないように元気に過ごしていきましょう。