youtube動画をレスポンシブ対応にCSSで調整する方法

2018年8月6日 (月) 21:58

先日から解説動画を作成してサイトに添付してアップしています。このサイトはどちらかというとプライベートな事ものせますけど、ビジネス要素が多いので、その方が説明が早いと思ったからです。先にテキストで文を書いて、その工程を動画にとって解説する流れですね。

動画に関しては一番カンタンで導入しやすいYoutubeを使ったんですけど、そのまま貼り付けるとかなり不具合がでてきたんです。黒枠だったり極端な横長だったり、スマホで見た時の横幅はみ出しなどです。横幅をレスポンシブにしたり、黒枠をなくして見栄えをよくするための作業を紹介します。

1. Youtube画像をそのまま貼り付けるといびつに
2. CSSにスマホに最適化できるコードを追記

Youtube画像をそのまま貼り付けるといびつに

もともと解説動画を作ってアップする事が目的だったので、ひとまずアップしてその後微調整をしようと考えていました。そこでアップした動画をそのままコードを貼り付けました。

<iframe src="https://www.youtube.com/embed/-nnj-ZSnBfM" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

そして見た目は

という形で悪くはないんですけど左よりで小さめなので、スマホのレスポンシブの兼ね合いもあって最適化出来るようにCSSに追記しようと思いました。

CSSにスマホに最適化できるコードを追記

.youtube{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

youtubeクラスの padding-bottomを56.25%にしています。56.25％というのは動画の縦横比で、Youtube の場合は動画を横:縦 = 16:9 で表示します。9÷16=0.5625で56.25%になります。動画編集ソフトなどの設定で16.9以外のものだと修正されて余白が黒くなるようです。

そういえば僕が使っているデスクトップの動画キャプチャソフトなのですが、解像度（縦横比？）を設定できるようでした。数値が大きくなれば縦横の幅が広くなります。16.9（倍数可）1280×720等は問題ないようです。今動画キャプチャソフト確認したら1280×720がありました。

次回からはそれで作ろうと思います。