Question 44133 in Html Question posted in
Some basic documentation can be found here.

Video js fill div without black behind video – Html

I tried using fill mode and this is what I get.

What I would like is not having black left and right of video, because controls also span 100% but ideally they would be the same as video width not wider.

I want to fill available area but not make video bigger than its natural size, and I dont want vertical scroll if video is bigger than it fits (so I dont use fluid option).

<script src="https://unpkg.com/video.js/dist/video.js"></script>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"/>


  
  <div style="width:100%; height:300px;">
  <video id="my_video" class="video-js vjs-fill" controls muted preload="auto" data-setup="{}" >
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
    </div>
Tags:

2

Answers


  1. 0

    You can do it if you know the aspect ratio in advance

    The key is to make a container for the video, which you carefully predefine to automatically grow to the desired height, based on the available width.

    For a 16:9 aspect ratio, set the padding-bottom to 9/16 = 56.25%

    .video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* Specific for 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
    <div class="video-container">
  <video id="my_video" class="video-js" autoplay controls muted preload="auto" data-setup="{}">
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
</div>
    Login or Signup to reply.
  2. 0

    You should not use measure in pixels.
    Give aspect-ratio:16/9; or something.
    and give to video element "object-fit" property

    .video-wrap {
  aspect-ratio: 16/9;
}

video {
  object-fit: cover; /*  if you want fill all area  (its can 
 be crop video */
}
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"/>


  
<div class="video-wrap">
  <video id="my_video" class="video-js vjs-fill" controls muted preload="auto" data-setup="{}" >
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search