埋め込みコード(iframe)のサイズ調整
埋め込みコードを含め、ラッパーとなる箱(divなど)の大きさを設定するとき、普段からwidthプロパティやheightプロパティを利用していましたが、どうしても動画の大きさの設定がうまく表示できませんでした。
調べたところ、CSSプロパティの"aspect-ratio"を埋め込みコード代表とする"iframe"タグのラッパータグに使用すると、かなり直感的に大きさの設定が出来ました。
"aspect-ratio"でwidth/heightの比率を設定
Youtubeなどからストリーム動画などをWebページに埋め込んで表示させたいとき、CSSプロパティの"aspect-ratio"を使用するとかなり便利です。何が便利って、この"aspect-ratio"プロパティでは、埋め込み要素のヨコとタテの比率を設定することが出来ます。
代表的な使い方は以下のとおりです。
aspect-ratio: 16/9;上記のように設定すると、2021年現在において動画の表示比率として代表的な、ヨコ”16″に対してタテ”9″の比率を保持してくれるようになります。
昔の動画に対しては以下のようにラッパータグに設定すると良いでしょう。
aspect-ratio: 4/3;上記のように設定するとアナログ時代では一般的であった、ヨコ”4″に対してタテ”3″の比率で埋め込みコードの大きさを、比率を保ってくれるようになります。
"width"や"height"では単位に％を使う
埋め込みコードの大きさを、もちろん"px"などで設定してもよろしいのですが、これに限らずレスポンシブデザインを意識すると"%"で単位を設定すると、ブラウザサイズを弄ったりしても比率を保ったまま大きくなったり小さくなったりしてくれるようになります。
注意する点としては、"width"や"height"などを使う時は、埋め込みコードの"iframe"タグなどに直接設定することです。逆に、"aspect-ratio"はラッパータグに使うので注意しましょう。
