Home/ Questions/Q 6051599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:50:11+00:00

I’m running an HTML5 video on my page and I’d like to make it

  • 0

I’m running an HTML5 video on my page and I’d like to make it resize edge to edge in ratio based on the browser’s size. It will be set as a background with very little on the page.

To cover my ass, I’m using VideoJS to play the video and handle backwards compatibility. The fullscreen function built into the library works well, but is triggering the browser’s native fullscreen function. In some browsers this means black bars, in Safari it means literally fullscreen independent of the browser window. I don’t want either of these.

http://videojs.com/

Ideally, it would function like Supersized does for images. The image is always set to the full width of the page, and height is cropped towards the CENTER from there. As you resize the page smaller and smaller, it hits a min-height and begins cropping the width towards the center.

http://lara.fm/

My JavaScript knowledge is minimal, but I’m able to poke and prod to figure things out. I figured that dropping in the Supersized resizing scripts after the VideoJS library and forcing them to work on video tags would work in some way.. at least a starting place, but it didn’t work.

Can someone help me understand what function can adjust width to the page, height in ratio, and crop towards the center at a certain width or height? Here’s what I’ve got so far:

http://kzmnt.com/test/

This is a tuffie, I know. Thank you SO much.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can try the following, (based on the demo you posted)

    .video-js-box.fullScreen{
    width: 100% !important;
    position: relative;
    background: black;
}
.fullScreen .video-js{
    height: 100% !important;
    margin: 0 auto;
    display: block;
}

    add the class .fullScreen at the video-js-box and see what happens.

    I am trying to achieve the effect you described above, and I ‘ll let you know as soon as I find a better solution.

    EDIT: Ok I think I found a solution – (VERSION 2)

    <!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8" /> 
  <title>HTML5 Video Player</title> 

  <!-- Include the VideoJS Library --> 
  <script src="http://kzmnt.com/test/video.js" type="text/javascript" charset="utf-8"></script> 

  <script type="text/javascript"> 
    VideoJS.setupAllWhenReady();
  </script> 

  <!-- Include the VideoJS Stylesheet --> 
  <link rel="stylesheet" href="http://videojs.com/video-js/video-js.css?v=1292015834" type="text/css" media="screen" title="Video JS"> 
  <style>
  body{margin:0;}
.video-js-box.fullScreen{
    width: 100% !important;
    min-width: 380px !important;
    min-height: 280px !important;
    position: relative;
    background: #eeeeee;
    position:absolute;
    overflow: hidden;
    top:0;
    left:0;
    height:100% !important;
    z-index:998;
}
.fullScreen .video-js{

    height:auto;
    /*height: 100% !important;
    width:100% !important;*/
    width:100%;
    top:0;
    left:0;
    margin: 0 auto;
    display: block;
}

.video-js-box{
    width:400px;
    height:auto;
}
.video-js-box video{
    width:400px;
    height:auto;
} 

#buttonImportant{
    position:fixed;
    top:0;
    right:0;
    width:100px;
    height:100px;
    border-radius:8px;
    background:#eeeeee;
    font-size:1.3em;
    z-index:999;
}
  </style>
</head> 
<body> 

 <div id="buttonImportant"> CLICK ME!!!  </div>



  <div class="video-js-box" id="videoContainer"> 
    <video class="video-js" preload loop fullscreen autoplay> 

      <source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
      <source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.webm" type='video/webm; codecs="vp8, vorbis"' /> 
      <source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
      <object id="flash_fallback_1" class="vjs-flash-fallback" width="1280" height="720" type="application/x-shockwave-flash" 
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" 
          value='config={"playlist":["http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.png", {"url": "../vid/kozmonaut_by_christina_tan.mp4","autoPlay":true,"autoBuffering":true}]}' /> 
      </object> 
    </video> 
  </div> 


 <script type="text/javascript">

var clicked =  document.getElementById("buttonImportant")

var videoContainer = document.getElementById('videoContainer');
var video = videoContainer.getElementsByTagName('video')[0];

video.style.height="auto";
video.style.width="400px";

clicked.addEventListener('click',function(){
    if( videoContainer.className.lastIndexOf("fullScreen")>=0 ){
        videoContainer.className="video-js-box";
        video.style.height = "";
        video.style.width="";
    }
    else
    {
        videoContainer.className="video-js-box fullScreen";
        video.style.height = "";
        video.style.width="";
    }
    myResizerObject.prevWidth = video.offsetWidth;
    myResizerObject.prevHeight = video.offsetHeight;



    myResizerObject.Init();
},false);

    var RESIZER = function(){ 

        this.prevWidth = video.offsetWidth;
        this.prevHeight = video.offsetHeight;

        this.videoContainer = document.getElementById('videoContainer');
        this.video = videoContainer.getElementsByTagName('video')[0];
        this.videoStyle = this.video.style;

        var ratio = this.video.offsetHeight/this.video.offsetWidth;

        var that = this;

        this.Init = function(){
            if( that.videoContainer.className.lastIndexOf("fullScreen")>=0 )
            {
                var videoContOffsetWidth = that.videoContainer.offsetWidth;
                var videoOffsetWidth = that.video.offsetWidth;
                var videoContOffsetHeight = that.videoContainer.offsetHeight;
                var videoOffsetHeight = that.video.offsetHeight;

                if(that.prevWidth!= videoContOffsetWidth)
                {
                    that.prevWidth = videoContOffsetWidth;
                    var desired = videoContainer.offsetHeight/videoContainer.offsetWidth;
                    if(desired>ratio){
                        that.videoStyle.width=videoContOffsetWidth*desired+videoContOffsetWidth*desired+"px";
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                    }
                    else{ 
                     that.videoStyle.cssText="height:auto;width:100%;left:0px;top:0px;";
                    }
                }

                if(that.prevHeight!=videoContOffsetHeight)
                { 
                    that.prevHeight = videoContOffsetHeight;
                    var desired = videoContOffsetHeight/videoContOffsetWidth;  
                    if(desired>ratio){  console.log(ratio);
                        that.videoStyle.top = '0px';
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                        that.videoStyle.width = videoContOffsetHeight*desired+videoContOffsetHeight/desired+'px';
                    }
                    else
                    {
                        that.videoStyle.top = -1*(videoOffsetHeight-videoContOffsetHeight)/2+'px';

                    }
                }

            }
        };
    };

    var myResizerObject = new RESIZER();
    window.onresize = myResizerObject.Init;

 </script>

 </body> 
</html>

    Copy – paste the above code to a new file and test it : )

    MAJOR EDIT 2: I refactored my code, and packaged it in a more object oriented form. Now it does move (modified top and left css attributes) so that the video remains centered when the screen ratio changes. It still does a weird little jump but it works quite well.
    I will keep working on this task because I think it’s a cool feature. Also I have no idea what happens or what would you like to happen during the flash fallback.

    ps. I kept the click me button but it is very easy to disable it.

    • 0