CODEWITHSUNDEEP
htmlresponsive-designvideo.js
plugincontainer
plugincontainer

Reputation: 630

How to make Video JS player (and video) scalable

I want to publish videos using Video JS player, but cannot get it to scale in response to different screen sizes.

On the Video JS homepage, the demo video scales (looks like from 970px to 600px width). But the code you get if you hit the "embed this player" button does not scale. Here is that code in action:

In the embed code, the size of the video is specified (640 x 264), but the demo page code gives no size for the video element. I've looked at the source of the video js page, but there's too much going on (13 scripts and 4 stylesheets) to track down what's making it scalable. There's also no video js forum, so they recommend asking here.

Anybody know how it can be done?

Upvotes: 0

Views: 1153

Answers (2)

Hussnain Cheema
Hussnain Cheema

Reputation: 161

You can make video.js player scalable by using media queries. On smaller screens, change the css of video js controls by media queries. This worked for me.

Upvotes: 0

Kaiido
Kaiido

Reputation: 136986

It comes from http://www.video-js.com/js/home.js l72 

videojs("home_video", {"height":"auto", 
"width":"auto"}).ready(function(){
    var myPlayer = this;    // Store the video object
    var aspectRatio = 5/12; // Make up an aspect ratio

    function resizeVideoJS(){
      // Get the parent element's actual width
      var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
      // Set width to fill parent element, Set height
      myPlayer.width(width).height( width * aspectRatio );
    }

    resizeVideoJS(); // Initialize the function
    window.onresize = resizeVideoJS; // Call the function on resize
  });

Upvotes: 2

Related Questions