htmlcssvideo.js

VideoJS scale video like youtube

I'm trying with VideoJS to scale my video so it always fits when window is scaling, the video is 1280x720 and looking for a solution like when you in youtbe theater mode, the video will be centered and as large as possbile but add black bars to side.

current code:

    <html>
<head>
    <title>Test Video</title>


<body>
    <link rel="stylesheet" href="video-js.css" type="text/css">


    <div class="container">
        <div class="VideoJS">

            <div id="Video">
                <video id="vid1" class="video-js vjs-fluid" controls preload="auto" playsinline webkit-playsinline
                    style="max-width: 100%">
                    <source src="testvideo.mp4">
                </video>
                <script src="video.min.js"></script>

                <script>
                    var player = videojs('vid1', {})
                </script>
            </div>
        </div>
    </div>
</body>
</html>

Edit:

This code below will present the player as I want it to behave but it takes up the whole page, so I need it to contain in a div but still scale as this code:

<html>

<head>
    <title>Test Video</title>

<body>
    <script src="video.min.js"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css">
    <video id="my_video_1" style="width: 100%;height: 100%;top: 0px;position: absolute;background-color: black;"
        class="video-js" controls>
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    </video>
 
</body>

</html>
Solution

  • Ok I think I've solved it, this is the css

    .container {
  position: relative;
    width: 100%;
    height: 56.25vw;
    max-height: calc(100vh - 250px);
    min-height: 480px;
    background: #000;
}

    The max-height is subtraced the amount of space above the container div