video.js size to fit div

percentage video.js
user2671810 picture user2671810 · Aug 11, 2013 · Viewed 64.1k times · Source

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>

Answer

adam187 picture adam187 · Aug 30, 2016

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/

Related questions

How do I calculate the percentage of a number?

I would like to calculate, in PHP, the percentage of a number. For example: $percentage = 50; $totalWidth = 350; For this example, 50% of 350 = 175 How can I do that?

Read More
Format number as percent in MS SQL Server

I am trying to simply format a number as a percent with two decimal places. If it is 37 divided by 38 (aka .973684210526315789), I would like it to show 97.36 % in the SQL output. I know it is recommended to do formatting in …

Read More
How do I print the percent sign(%) in c

I am a beginner in C, and I was wondering why this program does not print % sign? The code is: #include<stdio.h> main() { printf("%"); getch(); }

Read More