videoタグにobject-fitプロパティが未指定の場合の挙動
videoタグで動画を再生するWebページを作りました。
developer.mozilla.org
Webページを作ったのはいいのですが、なぜか動画の左右に空き(？)のような領域ができて、動画が再生されます。
動画の上下方向は、指定したサイズになっているようです。
高さと幅の指定を間違えたのかと確認しましたが、正しく指定していました。
Photo by Wahid Khene on Unsplash
どうすれば動画が、指定した高さと幅で再生されるのかと調べたところ、object-fitプロパティの存在を知りました。
developer.mozilla.org
object-fitプロパティの初期値はfillで、動画の左右に空き(？)のような領域はできず、指定したサイズに合わせるはずですが、合っていません。
object-fitプロパティにcontainを指定したような動作になっています。
今回は、videoタグに、object-fitプロパティを追加して、coverを指定して対処しました。
coverであれば、縦横比が維持され、はみ出す場合はカットされるからです。
videoタグは、指定したサイズに自動で調整して、再生するものだと思っていました。
今回、videoタグは、フレーム内のコンテンツの一部としたために、このような現象が発生したのかもしれません。
