i have been trying to make my video fill its container but it's not working

Question

enter image description here

how do i make the video to display and fill the whole container instead of showing in the middle and when the video page is loading the height gets very big and then returns to normal after loading thereby causing a big layout shift on page load.please how do i solve this

i tried setting the video width and height to 320*240 in the video tag and also when i try object-fit i get an error sayng "unknown property".

this is the css

    /* panel [videos] */
.panel-videos div[class^="col-"],
.panel-videos div[class*=" col-"] {
  padding: 1px;
  padding-bottom: 0;
  object-fit: cover;
}

.pg_video {
  position: relative;
  background: #eee;
  display: block;
  padding-bottom: 100%;
  overflow: hidden;
}

.pg_video video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  width: inherit;
  height: inherit;
}

.video {
    display: block;
    object-position: center;
    width: inherit;
    height: inherit;
}


.u-object-fit--fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
}

.pg_video .play-button {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  display: block;
  width: 50px;
  height: 50px;
 /* padding-top: 11px;
  padding-left: 6px; */
  border-radius: 50%;
  color: #f5f5f5;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.pg_video:hover .play-button {
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(255, 255, 100, 1);
}

<div class="col-6 col-md-4 col-lg-3">
  <a class="pg_video" href="{$system['system_url']}/posts/{$video['post_id']}">
    <video class="u-object-fit--fallback">
      {if empty($video['source_240p']) && empty($video['source_360p']) && empty($video['source_480p']) && empty($video['source_720p']) && empty($video['source_1080p']) && empty($video['source_1440p']) && empty($video['source_2160p'])}
        <source src="{$system['system_uploads']}/{$video['source']}" type="video/mp4">
      {/if}
      {if $video['source_240p']}
        <source src="{$system['system_uploads']}/{$video['source_240p']}" type="video/mp4" label="240p" res="240">
      {/if}
      {if $video['source_360p']}
        <source src="{$system['system_uploads']}/{$video['source_360p']}" type="video/mp4" label="360p" res="360">
      {/if}
      {if $video['source_480p']} 
        <source src="{$system['system_uploads']}/{$video['source_480p']}" type="video/mp4" label="480p" res="480">
      {/if}
      {if $video['source_720p']}
        <source src="{$system['system_uploads']}/{$video['source_720p']}" type="video/mp4" label="720p" res="720">
      {/if}
      {if $video['source_1080p']}
        <source src="{$system['system_uploads']}/{$video['source_1080p']}" type="video/mp4" label="1080p" res="1080">
      {/if}
      {if $video['source_1440p']}
        <source src="{$system['system_uploads']}/{$video['source_1440p']}" type="video/mp4" label="1440p" res="1440">
      {/if}
      {if $video['source_2160p']}
        <source src="{$system['system_uploads']}/{$video['source_2160p']}" type="video/mp4" label="2160p" res="2160">
      {/if}
    </video>
    <div class="play-button"><i class="fa fa-play fa-2x"></i></div>
  </a>
</div>