YouTubeの動画をレスポンシブ対応でサイトに埋め込む

ホームページ（ブログへ移転）のMusicにYouTubeチャンネルの自作曲の動画を埋め込みコードで置いているけれどもiframeタグで載せるようになっていてサイズが固定されているんだ。そこで大きなものをスマホで観ると画面からはみ出してしまうからレスポンシブ対応でデバイスの画面にきっちり収めたいと思った。ところがiframeタグをCSSのwidthで100%に指定すると横幅は合う（metaタグのviewportの設定によってページそのものはレスポンシブ対応にしてある）のに縦幅が合わないんだ。縦幅をheightで指定しても駄目で、どうしても動画の画面比が崩れるので、スマホのために小さいものを載せるようにせざるを得なかった。考えるとガラケーならばはみ出すような大きさだったり、パソコンやタブレットではダイナミックに載せられなかったりしてしまうので、やはり何とかしたくなって調べてみた。YouTube動画の埋め込みのレスポンシブ対応のソースコード見付け出したのがWordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法という記事で、そこに載っていた.move {position:relative;width:100%;padding-top:56.25%;}と.move iframe {position:absolute;top:0;right:0;width:100%;height:100%;}のソースコードを使ってみるといとも容易く目的を果たすことができた。 ForevermoreでYouTubeの動画をレスポンシブル対応で埋め込んだMusicの画面

ForevermoreでYouTubeの動画をレスポンシブル対応で埋め込んだMusicの画面

エレクトロ｜Forevermore

CSSのpositionで親ボックスの右上からYouTubeの埋め込みコードを表示している。padding-top:56.25%が味噌みたいだ。親ボックスの上部の内側に空間を取りながら動画を移動して置いているわけだけれども56.25%とは何なのかと思う。どうにもならなかったYouTubeの埋め込みコードのレスポンシブ対応が可能なんて魔法の数字のようで驚かされながらも自分なりにiframeタグの縦横の幅を試行錯誤して分かって来たのはHD動画の1280×720の16:9の画面比の縦幅の割合に当て嵌まっていたんだ。なので横幅を100%にした場合に縦幅は56.25%で16:9の画面比を維持できるということだろう。数学の復習になるけど、計算は比例式で解ける。16:9=100:Hとすると内積（9×100）と外積（16×H）が等しいので、900=16×Hとなり、H=900÷16で、56.25なんだ。埋め込みの縦横比を変えて初期値の16:9以外で表示することもできるところでYouTubeの動画は必ずしも16:9の画面比でアップロードされているとはかぎらないようで、4:3の画面比のものも観たことがある。すると当のソースコードはpadding-topの割合を変えることによって様々な画面比で動画を表示することもできるので、柔軟性も高いだろう。比例式で割合は弾き出せるし、4:3が欲しければ100:75になるから75%にすれば良い。YouTubeの動画の埋め込みコードにwidthとheightが記載されていて実際に配信される作品の画面比が分かるので、サイトにレスポンシブ対応でサイズ感までぴったり合わせることも決して無理ではないんだ。追記：その後、CSSでYouTube動画に使われるiframeタグの縦横比を計算できるcalc()や一発で指定できるaspect-ratio要素でもレスポンシブ対応が可能になった。