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

関連記事

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

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

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

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

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 目次 ...

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...