Setting Videojs Up For Responsive Design

Place the video html markup code on your page, in this page example the code is placed in a container div div.videocontent has 2 CSS declarations for width, it has a width:80% and a max-width:640px.

It has the main width set to 80% as then it will keep it’s width in proportion to its parent container when scaling, you need to find the percentage figure that works in your design, in this example the parent container is the div.wrapper.

I also don’t want the video displayed any wider than 640px, so that’s why the max-width is set to 640px.

So the html markup is

<div class="wrapper">
 <div class="videocontent">
	<video id="myvideo" class="video-js"..........</video>
 </div>
</div>

In the Video HTML MarkUp change the width and height values from their px dimensions to auto, this makes it work in IE9!

<video id="myvideo" class="video-js vjs-default-skin" controls
 preload="auto" width="auto" height="auto" poster="my_video_poster.png"
data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
</video>

The Magic Touch

From here we need to add in 2 extra CSS rules to your CSS file, wrap these in the <head><style></style></head> in the head of your document, they need to be declared as late as possible and after the main VideoJS CSS files, if you don’t care about fullscreen you can add this in your regular CSS but if you do then add the rules as late as possible

.video-js {padding-top: 56.25%}
.vjs-fullscreen {padding-top: 0px}
<div class="wrapper">
 <div class="videocontent">
  <div id="myvideo_vjs1" class="video-js vjs-default-skin vjs-paused">
	<video id="myvideo" class="vjs-tech"..........</video>
  </div>
 </div>
</div>
<div class="wrapper">
 <div class="videocontent">
  <div id="myvideo_videojs1" class="video-js vjs-default-skin vjs-playing vjs-fullscreen>
	<video id="myvideo" class="vjs-tech"..........</video>
  </div>
 </div>
</div>

This .video-js is the class that is generated by VideoJS and is a class containing the video tag.

Skriv et svar