サーバーにアップロードするときだけ何故か動画MP4の左右に黒帯が表示される。

Visual Studio CodeのGo Liveという機能で見るときちんと動画は黒帯なしで表示されているのですが、実際にサーバーにアップロードして確認してみたら左右に黒帯が表示されてしまいます。

以下の情報を提示しています。

・動画単体のURL、
・サーバーにアップしたHPの中の動画のURL
・Go Liveで見た時の画像
・サーバーにアップしたHPの中の動画のURLを見た時の画像
・ソースコード
をそれぞれ提示しています。

原因はなんでしょうか？

ちなみに動画の元のサイズは１２８０×７２０のアスペクト比16:9で維持して、縮小した７３６×４１４のサイズの動画をアップロードしています。

●以下のリンクが自際にアップロードした動画です。
アップロードした動画自体のURL
https://rensyuu12.tokyo/PHPMailer/kk.mp4
左右に黒帯は出てないと思います。

しかし、HPにアップロードすると黒帯が出ます。

以下がHPのURLです。
https://rensyuu12.tokyo/PHPMailer/201.html

Go Liveで見た時の画像です。以下。黒帯はありません。

同じ動画をHPにアップロードして、そのURLをクリックした時の画像です。左右に黒帯が出ています。以下。

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6	<meta content="text/html; charset=utf-8" />
7	<meta name="viewport" content="width=device-width, initial-scale=1">
8	<link rel="stylesheet" href="reset.css">
9	<title>ビデオ調節</title>
10	
11	
12	
13 
14	<style>
15   /* ビデオの配置 */
16	.test{
17	
18	text-align: center;
19	margin-top: 100px;
20	margin-bottom: 250px;
21	
22	}
23	/* ビデオの大きさを指定（絶対値のみしかできない）　＃videosize｛｝でもOK.絶対値のみ対応 */
24	.test video{
25
26	width: 700px;
27	
28	}
29/* 画像の大きさ調節 */
30img.example1 {
31  width: 100%;
32  height: 400px;
33  text-align: center;
34  }
35
36/* 画像中央配置 */  
37.center{
38  text-align: center;
39}
40
41
42
43</style>
44
45</head>
46<body>
47	<div class="test">
48	<video autoplay="" loop="" muted="" playsinline="" id="videosize">
49		<source src="https://rensyuu12.tokyo/PHPMailer/kk.mp4" type="video/mp4">
50		<img src="https://rensyuu12.tokyo/PHPMailer/sumaho.png" alt="［写真］" class="example1"> 
51	</video>
52</div>
53</body>
54
55</html>