Webサイト制作

投稿日:2024年4月3日 更新日:

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

やりたいこと

Videoファイルが横長で見にくいので縦幅を調整したい

原因

Video要素のobject-fitがデフォルトでcontainになっている。
object-fit:fill;を指定してあげる

対策

対策1

video{ 
object-fit: fill;
height:440px;
}

対策2

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

問題点

対策1は、ページに表示しているときは問題ないが、動画を拡大して見たときにobject-fit:fillが受け継がれているので間延びして見えてしまう。
対策2は、動画を拡大しても問題ない。

- Webサイト制作
-

関連記事

no image

画像の拡大表示(ポップアップ)

目次1 やりたいこと2 タグを設置3 画像にクラスを付与4 スクリプトを記載5 スタイルを記載6 完成! やりたいこと 画像のポップアップがしたい! タグを設置 html内であればどこでも良いので、ポ ...

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 目次1 amazon ...

スライドショーの画像を切り抜いたように表示する

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回 ...

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 目次1 まずはhtml2 つぎにcss3 cssの中身の解説4 高さ ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...