技術メモ

上下左右に黒帯を出さずにYouTube動画(16:9)のIFRAMEのアスペクト比を変える

投稿日:

YouTubeの動画は16:9なので、16:9以外のアスペクト比にすると、
動画が内接するように上下左右に黒帯が出る。

アスペクト比を変えた矩形にクリッピングして、
それをレスポンシブにする例がなかったので自作してみた。

どういうことかというと、下のイラストみたいな感じ。
大きい方の矩形がYouTubePlayerのIFRAME。
内接する小さい方が作りたいアスペクト比の矩形。

明るい方だけを抜き出してレスポンシブにします。
(動画の余った部分は欠けます)

コード達

16:9(56.25%)を53.88%に切り抜いてレスポンシブ化するHTML,CSS,JS。
Chrome,Safari(PC)とFirefoxで確認済み。

HTMLは以下。

CSSは以下。

IFRAMEの最初の高さだけCSS化できなかった...。
最初の高さを設定するJSは以下。jQueryにするなんなりしてください。

-技術メモ

Copyright© ikuty.com , 2019 AllRights Reserved Powered by AFFINGER4.