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

YouTube動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。デザインのCSSのコーディングで解決できて僕としてはCSS関数のcalc()を使ってiframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。追記：CSSでiframeの縦横比を一発でレスポンシブに指定できるaspect-ratioが多くのブラウザで対応して来てたので、calc()のコーディングに置き換えて新しく使うようになった。Bloggerブログでどうやるか、何よりもデバイスの画面毎のデザインの振り分けが必要だけど、しかしBloggerでのYouTube動画の埋め込みは只単にYouTubeから得られる埋め込みコードを一般的に使うだけではなくて投稿画面からYouTube動画を検索して専用のソースコードを特殊的に取り込めたりもするので、混乱しないようにCSSのコーディングを適切に纏めておきたい。テンプレートのカスタマイズはBloggerのウェブのテーマのHTML編集かバックアップ／復元で、ソースコードのskin（通常のCSSのstyleタグに変換される独自タグ）内の他のVariableなどの独自タグやメディアクエリ（@media screenの振り分け）を除外した場所に記載するか、または編集するのはCSSのコーディングだけなので、カスタマイズの上級者向けの「CSSを追加」を使っても大丈夫だ。YouTube動画のレスポンシブ対応の埋め込みの一般的な方法

結城永人 - 自然倍音列｜結城永人

iframeタグの埋め込みコードはYouTubeのパソコンのウェブの動画の共有ボタンの埋め込むから得られる。開始位置（時間）やオプションでコントロールバーやプライバシー、さらに動画の大きさもソースコードのwidthとheightの値を書き換えて縦横に決められる。レスポンシブ対応では小さな画面のデバイスの場合に画面幅に合わせながら画像比も崩さず、縦横のバランスを取って表示する。YouTubeの共有ボタンはBloggerも選択可能で、直ぐにYouTube動画を投稿できるようになっているけれども埋め込みコードはデフォルトのサイズが少し小さいのと幾つかのオプションを除いた以外は共有ボタンの埋め込むから得るのと大差がないので、レスポンシブ対応のカスタマイズも一般的な方法に属する。モバイルの振り分けのサンプルのソースコードそのままのiframeタグへデザインを指定すると他のiframeタグのコンテンツも同じに表示され得るので、YouTube動画の埋め込みだけを対象にするならば何等かのセレクターを追加しておかなくてはならない。HTML

<div class="ytmv">
YouTube動画の一般的な埋め込みコード
</div>

CSS

@media screen and (max-width:678px) {
.ytmv iframe {width:100vw;height:calc(900vw / 16);}
}

スマホと縦向きタブレット程度まで画面の横幅一杯にYouTube動画を16:9の画像比で表示するようにレスポンシブ対応のデザインを付ける。両側に隙間を付ける場合はCSSを書き換えなくてはならない。calc()の計算式で示す

.ytmv iframe {width:calc(100vw - 左右の余白の合計);height:calc((100vw - 左右の余白の合計) * 画像比の縦の比率 / 画像比の横の比率);}

計算式の「左右の余白の合計」は「左の余白 + 右の余白」に等しい。入力する値の単位は基準値の「100vw」（画面の横幅一杯）のvwで揃える必要はなくてpxやemなどの固定値ならば何でも使える。%などの相対値は縦幅のcalc()の値を入力する際に横幅の実際の長さと揃わなくなる（横方向と縦方向で%の値そのものが変わる）から使えない。YouTube動画の場合は16:9の画像比が多いので、計算式に当て嵌めると「画像比の縦の比率」が「9」で、「画像比の横の比率」が「16」になる。パソコンや横向きタブレットはYouTubeの埋め込みコードでサイズをぴったり指定する。CSSからサイズを変更する場合

@media screen and (min-width:679px) {
.ytmv iframe {width:横幅;height:縦幅;}
}

ブログのカラムに合わせて横幅と縦幅の数値を入力するだけだ。YouTube動画のレスポンシブ対応の埋め込みのBlogger専用の方法 BloggerのYouTubeから動画を追加する投稿画面

投稿画面｜Blogger

Bloggerのウェブの投稿の作成モードで入力画面の上の動画メニュー（映画のカチンコのアイコン）を開くとYouTube動画を検索して投稿できるようになっている。この場合、Bloggerのサーバーからiframeタグにデザイン用の属性が自動的に幾つか追加されている。投稿画面を作成モードからHTMLモードに切り替えると取り込んだYouTube動画の埋め込みコードが確認できる。

class="BLOG_video_class"

width="320"

height="266"

data-thumbnail-srcはインデックスページのサムネイル画像を画像URLの末尾の「0」を他の場面やサイズのタイプに切り替えて表示できた。CSSのセレクターにclassがあってデザインを個別に指定できるからレスポンシブ対応にも使える。その他、widthで横幅、heightで縦幅を変更して指定することができる。あるとき、BloggerのYouTubeの埋め込みコードが変更されて以前のものを使っている場合は次のようになっている。

class="YOUTUBE-iframe-video"

width="320"

height="266"

data-thumbnail-src="サムネイルの画像URL"

classが違うので、CSSの指定先が変わることに注意しなくては行けない。widthとheightは同じで、その後、削除されたけれどもdata-thumbnail-srcという属性があってインデックスページのYouTube動画のサムネイル画像の画像URLが記載されている。これはSNSへの記事共有のOGP設定やTwitterカードにも使われるものだ。YouTube動画のサムネイル画像の画像URLは末尾の「0」を編集して他の場面やサイズのタイプを変えることもできる。BloggerのYouTube動画の埋め込みコードが二つに分かれている場合、デザインを付ける場合は注意を要する。それぞれにCSSを記載しなくては行けない。以前の動画を、もう一回、載せ直すと埋め込みコードが新しいものに変わるから、全部、やって統一すればCSSを分割しなくても済むようになる。モバイルの振り分けのサンプルのソースコード内容は一般的な方法の場合と同じで、レスポンシブ対応のためのCSS関数のcalc()の使い方も変わらない。カスタマイズではHTMLはYouTube動画の埋め込みコードが投稿画面の作成モードの動画メニューから検索して記載されるだけだから何もする必要はないけど、ただしCSSのセレクターには必ず「.YOUTUBE-iframe-video」のclassを記載しなくてはならないのを注意する。普通とは違ってCSSのセレクターはHTMLと併せて編集する任意の項目ではなくてBloggerのサーバーから自動的に付けられるを使うからCSSのマークアップで変更するとデザインが反映しなくなるんだ。HTML

YouTube動画のBlogger専用の埋め込みコード

CSS

@media screen and (max-width:678px) {
.YOUTUBE-iframe-video {width:100vw;height:calc(900vw / 16);}
}

※太字のclassは変更してはならない。Blogger専用の方法はBloggerのサーバーから自動的に付けられるclassを使えるから個別にデザインを付ける際に便利だし、記事／追加ページではYouTube動画を動画メニューからいつも同じように取り込んでいれば全てのデザインを一括して個別に変更できるようになりもするのが手早い。