css ,videotタグ。ホームページに動画を埋
css ,videotタグ。ホームページに動画を埋め込んだのですが、左右に黒帯ができてしまいます。この黒帯を無くしたいです。
ソースコードは下にあります。object-fit: fill;でも治りません。
動画は元は1280×720サイズで作成し、ホームページ用にサイズを小さくしてｍｐ４に書き出しました。1280×720から896×414に変更、アスペクト比１６：９でＯＫ。
1280×720の時は黒帯はでませんが、サイズを896×414に変更してアップロードすると黒帯が出てしまいます。
動画編集ソフトで書き出しする時アスペクト比は自動で16:9になるので間違ってないと思います。付属画像参考
●実際のホームページのＵＲＬは以下です
（何故かアクセス制限が出て見れなかもしれませんので、ソースコードと付属画像も下に提示してます。）
https://rensyuu.s205.xrea.com/rensyuu12.tokyo/PHPMailer/201.html
★参考にしたサイト動画の大きさ（デバイス別とアスペクト比）の参考サイト
https://www.somethingfun.co.jp/video_tips/movie_resolution#:~:text=%E7%94%BB%E9%9D%A2%E3%81%AE%E8%A7%A3%E5%83%8F%E5%BA%A6%E4%BB%A5%E4%B8%8A%E3%81%AE,%E8%80%83%E3%81%88%E3%82%8B%E3%81%A8%E3%82%88%E3%81%84%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82
★ソースコードは以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ビデオ調節</title>
<style>
.test{
text-align: center;
object-fit: fill;
}
</style>
</head>
<body>
<div class="test">
<video autoplay="" loop="" muted="" playsinline="" id="videosize">
<source src="hgh.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
