video.js size to fit div

Question

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>

Did you tried: $(this).css({ "width":""+$(this).closest('div').width()+"px", "height":""+$(this).closest('div').height()+"px" }); In Jquery when video loads ? By the way can you show your HTML please ? — Vedant Terkar, Aug 11 '13 at 06:51
Please put the code in the question so people can understand what you're writing about. — Brad Peabody, Aug 11 '13 at 06:53

score 96 · Answer 1 · answered Aug 30 '16 at 09:21

96

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/

answered Aug 30 '16 at 09:21

adam187

3,193
21
15

8

This is exactly what I was looking for (the fluid option). Thanks! – Christopher Davies Oct 25 '16 at 14:04
fluid works but whatch out the quotes. You can't use ' (single quote) in JSON, only " (double quotes). This must be exacly likte this : '{"fluid": true}' – matasoy Sep 12 '18 at 07:27
5

You can now also use `vjs-fluid` option in the video element without the hazzle – Kalle H. Väravas Jan 19 '19 at 19:27

score 19 · Answer 2 · edited Apr 16 '14 at 07:52

19

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.

edited Apr 16 '14 at 07:52

Daelis

45
1
11

answered Nov 13 '13 at 11:44

GentleFish

349
3
5

3

Works like a charme, I just had to add it not only to .video-js but to .video-js .vjs-tech ... Regards Stefan – Stefan Walther Jun 20 '14 at 22:12
What about using `Player#width()` or `Player#height()` as shown here: http://docs.videojs.com/tutorial-skins.html ? – Jordan Oct 06 '17 at 23:02
you can add `height: 100vh !important;` so it will fit the whole screen , then embed it in iframe . – Salem Aug 20 '18 at 19:48

score 7 · Answer 3 · answered Aug 11 '13 at 22:17

7

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.

answered Aug 11 '13 at 22:17

heff

3,171
1
20
21

Still no luck. The player won't display the poster image, and When I click the play button the video plays with absolutely no image, just audio and the player control bar. – user2671810 Aug 11 '13 at 23:11
'
– user2671810 Aug 12 '13 at 04:18

Stubby · Answer 4 · 2014-03-01T05:18:12.043

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.

score 3 · Answer 5 · answered Jul 28 '17 at 08:35

3

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

did it for me

answered Jul 28 '17 at 08:35

Dan Ochiana

3,340
1
30
28

score 2 · Answer 6 · answered Oct 03 '13 at 15:28

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;

video.js size to fit div

6 Answers6

Linked