video.js size to fit div

问题:

I have a video in a div with a 40% width. In the html, width="100%" height="auto" makes the video disappear. Setting a specific size in pixels won't fit the div. Leaving the html blank leaves the video the wrong size and with black bars on the sides.

I've tried the suggestions in most other posts, but can't seem to get it to work.

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto" width="auto" height="auto" poster="images/reelthumbnail.jpg"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>

回答1:

In version 5 of videojs you can use vjs-16-9 vjs-4-3 class on video object,

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

or use fluid option

<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...>
...
</video>

Source: https://coolestguidesontheplanet.com/videodrome/videojs/

回答2:

You have to use the ugly !important to override the default absolute positionning of the video :

.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

This done, the poster image will display after the video, instead of over it, so you have to fix it with :

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

Note that it must have the same ratio as the video it you want it to display nicely.

回答3:

In the HTML of the video tag set the width and height to auto. Then with CSS set the width/height of the video ID to 100%.

Setting the width and height attributes to auto makes the player work just like a div, which has no dimensions by default.

回答4:

Here's the method I used to fix this problem. First remove any declaration of size on the video object.

Set your containing element's position property to relative.

.video_container {
  position: relative;
}

Add the poster image to the containing element and set its width to 100% and height to auto. This will force the div to size itself vertically to the height of the poster image (which if you've done it right should be the same size as your video)

.video_container img.poster {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

Now set the position of .video-js to absolute and set its height and width to 100%. This will cause .video-js to scale itself to the height and width of the poster image which is scaling itself appropriately to the containing div.

.video_container .video-js {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}

If you're dynamically getting your thumbnails from your videos using a service like Zencoder to generate thumbnails and allowing users to upload video this will ensure that your video is always scaled properly because you can get dimensions from the image which will scale proportionally vertically.

回答5:

Just found this: http://jsbin.com/idinaf/4/edit from here http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

hope this helps someone.

edit: IMO you should just try this with some simple CSS:

width: 100% !important;
height: auto !important;

回答6:

  video[poster]{
    object-fit: fill;
}

did it for me