画面のサイズに合わせて動画を再生したい。

HTMLに動画を張り付けて、画面のサイズに合わせて縦横比を変えずに再生したく、下記のHTMLとCSSを作成しました。
CSSについては下記のサイトを参考に作成（というかコピペです。）し、名前をmystyle.cssとしています。
https://umlaut.club/web/video_tag2

HTMLでCSSを呼び出した（リンクした）事で、HTML内でVideoタグを使うと、自動的にCSSの設定どおりvideoが再生されるものと思っていましたが、CSSが無い状態と同じ状態で再生されてしまいます。

CSSへのリンクがうまく行っていないのか、それともこのCSS自体、目的と異なったものなのか・・・。
HTMLからのCSS呼び出しが初めてなので、そもそもコードがおかしい等、ご指摘いただければ幸いです。

また、上記の目的（画面のサイズに合わせて動画を再生）を達成する為に他の方法が在る場合もアドバイスいただけると幸いです。

＜HTML＞

<DOCTYPE html>
<html>
<head>
<meta chart="shift JIS">
<title>動画表示</title>
<link rel ="stylesheet" type = "text/css" href="mystyle.css">
</head>
<body>

<video src="movie.mp4" controls autoplay playinline loop></video>

</body>

＜CSS＞

.video-container {
  margin: 0 auto;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(img/video.jpg) no-repeat center center/cover;
}

video {
  min-width: 100%;
  min-height: 100vh;
  position: absolute;
}

/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  video {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}

/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
  video {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}

未熟なコード、質問内容かもしれませんが、よろしくお願いします。
※　HTML、CSS、動画ファイル(MP4)ともに同一のディレクトリ内に有ります。