More than 5 years have passed since last update.

Video要素の縦横比を変更する

Last updated at 2016-10-23Posted at 2016-10-23

検証環境

Chrome 54.0.2840.59

Video要素のwidth, heightを変更しても要素の縦横比がキープされた状態で大きさが変更されてしまうため、Video要素は縦横比を変えることが出来ない。グーグル先生は解決方法を教えてくれない（と、ある勉強会で聞いた）

Video要素のobject-fitがデフォルトでcontainになっている。
※Image要素とかは、fill

object-fit: fillを指定する。

video {
    object-fit: fill;
    width: 75%;
}

transformでも一応大丈夫そう

video {
    transform: scale(0.75, 1);
}

アスペクト比変わらない　width height