CODEWITHSUNDEEP
percentagevideo.js
user2671810
user2671810

Reputation: 481

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>

Upvotes: 48

Views: 108489

Answers (6)

Dan Ochiana
Dan Ochiana

Reputation: 3408

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

did it for me

Upvotes: 3

adam187
adam187

Reputation: 3393

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/

Upvotes: 103

GentleFish
GentleFish

Reputation: 357

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.

Upvotes: 20

Stubby
Stubby

Reputation: 41

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.

Upvotes: 4

yogee
yogee

Reputation: 182

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;

Upvotes: 2

heff
heff

Reputation: 3239

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.

Upvotes: 7

Related Questions