Youtube動画をブログ画面ぎりぎりに広げたい( ..)φメモメモ

私の環境では、width="719"、height="410" と表示されました。

みんカラブログ PC版で、ブログ全体のデザインが崩れない前提でどこまでサイズを広げられるか？をやってみたところ、
width="580"
height=無しに等しい
でした。

Youtubeの動画を"画像"ボタンを使って載せると、ブログ画面の幅が動画の幅よりも広すぎて、ブログ右側に余白が多く出ます。

かといって、Youtubeからコピーしてきた埋め込みコードをそのまま使用すると、動画の幅の方が広すぎて、ブログ全体のデザインが崩れます。

width="580"に設定すると、動画の上下に黒い帯（？）が出て来る。

目標は、Youtubeで見ている動画のように、幅は目いっぱい広げて、黒い帯（？）を出させない状態。
そこで、比率を元に最適なheightを計算してみます。

719 ： 410 ＝ 580 ： ｘ
ｘ ＝ 580 × 410 ÷ 719
ｘ ＝ 330.7371349095967
ｘ ≒ 331

この計算式から、

みんカラブログでの height の値 ＝ 580 × Youtube動画 heightの値 ÷ Youtube動画 widthの値

が成り立ちますね。

みんカラブログに width="580" で載せるなら、hight='331' に指定すれば、上下に黒い帯（？）が出ることを極力抑えられます。

width、heightの指定を実際にいくつか試してみました。

１．width = "580" 、height無しの場合

幅は申し分ありませんが、縦幅は黒い帯（？）が出ます。


２．width = "580"、height = "320" の場合

黒い帯が消えました！が、動画の上下が切れてしまいました。


３．width = "580"、height = "330" の場合

２番よりも動画の上下が切れていませんが、依然として少しだけ切れています。


４．width = "580"、height = "331" の場合

ベストアンサー。ギリギリを攻めることが出来ています。


５．width = "580"、height = "340" の場合

340にすると、黒い帯（？）が出てきてしまいます。

と、こんな感じで指定値によって表示は変わってきます。



こちらはおまけです。
前後編を続けて見ると、洗車したるぞー！という気分になります（自分だけ？）

関連情報URL : https://www.youtube.com/?gl=JP&hl=ja