douxiangui5011
douxiangui5011
2018-09-22 04:27

如何使视频的形状和高度相同

已采纳

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;

    }); 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • duangan4406 duangan4406 3年前

    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');

    点赞 评论 复制链接分享