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サイト制作
-

関連記事

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

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

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ ...

-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、CSS3を使う際に使用するプロパティの前につけるキーワードです。 サイト制作者には当たり前に思えるベンダープレフィックス。 今までどうしてこれを付けないといけないかがよく分かってい ...

no image

クリック開閉のタグ[jQuery+css使用]

jQuery+cssを使用したクリック開閉のタグ。 簡単に設置できるのでお世話になっています。 jQueryのタグ <script> jQuery(function($){ $('.box ...