Как сделать видео одинаковой формы и высоты

Question

Я загрузил два видео в базу данных, и они отображаются на моем сайте.Я пытаюсь сделать их одинаковыми по форме и высоте.Ширина хорошая, но одна из них имеет форму квадрата, а высота длиннее, а другая прямоугольника, а высота короче, и я знаю, что из-за способа съемки видео, один был взят вертикально, а другой - горизонтально.Как мне заставить их быть одинаковой формы и роста.Можете ли вы помочь мне, пожалуйста?

     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

Это кое-что, что я придумал, когда мне нужно выводить видео YouTube в iframes, и его очень отзывчивое значение означает, что он регулирует свою высоту и ширину в зависимости от текущего размера экрана.

<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 *Для фона 1004 * обычно рекомендуется, чтобы пользователи с медленной сетью имели что-то в фоновом режиме во время загрузки содержимого iframe

, но вам нужно найти свой уникальный файл / изображение gif и указать его местоположение в background-image:url('../file-location-here.gif');