How to make videos same shape and height - php

Question

I have uploaded two videos to the database and Its being displayed on my website. I am trying to make them the same shape and height. The width is fine, but one of them is shaped like a square and the height is longer while the other is rectangle and the height is shorter and I know its because of the way video was taken, one was taken vertically and the other horizontally. How do I get them to be the same shape and height. Can you help me please?
I tried this
<video class="video1" id="cb" preload="auto" video="src="{{$proo->video}}#t=1"" style=" height:80%; max-height:20em; width:100%; max-width:20em; object-fit: cover;
float:left; clear:both;
padding-left:2%; margin-top:0px; cursor:pointer; "><source="video1.jpg" playsinline alt="Video Unavailable" id="" ></source>
</video>
this the javascript part to handle the onclick,onmouseleave
$(document).on('mouseover touchstart', 'video', function() {
$(this).get(0).play();
this.muted=true;
});
//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
this.currentTime = 1;
$(this).get(0).pause();
});
$(document).on('click touchstart', 'video', function() {
$(this).get(0).play();
this.muted=false;
this.currentTime = 0;
});

Answer 1

This a little something i came up with when i need to output YouTube videos in iframes and its very responsive meaning that it adjusts its height and width in relation with current screen size.
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*use the div to specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="source here" value="value here" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');