BloggerブログでYouTube動画の埋め込みをレスポンシブに表示するCSSコーディング

YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。 デザインのCSS のコーディングで解決できて僕としては CSS関数のcalc()を使って iframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。 追記:CSSで iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio が多くのブラウザで対応して来てたので、calc()のコーディングに置き換えて新しく使うようになった。 Bloggerブログでどうや…