CODEWITHSUNDEEP
cssvideo.js
Dave
Dave

Reputation: 71

VideoJs Width Height Issue

I am trying to work with a video and having it render on the website.

I am not allowed to post the video for legal reasons but have some questions re the width and height of the actual video.

The Original height and width of the video are 960 x 540, and they want it on the website rendering at a 1/3 less height with the video being full width (without black bars on the outside).

I keep explaining that when you scale down the height, the width has to go proportionately so that the video stays in scale.

They showed me examples like this: http://pillar.mediumra.re/home-landing-service-3.html but fail to understand that the video on the header is cropped from the inital value, and which uses object-fit, which doesn't work in IE11,etc.

Is there anything else i can do or change in the css to make this work.

I tried rescaling the video in VLC and using that but it gets all pixely and when i do the videojs class vjs-16-9 it will be the same height of the previous video.

Also the video is a 18mb video, i tried using the vimeo vjs plugin instead to acommodate less bandwidth but when you hover on the video it will show the control bar from vimeo and i assume they wouldn't want that.

I also tried playing with certain css class' but it doesn't scale down correctly (has the black bars).

/* Video Code Changes */
.video-js.vjs-fill{
 /* max-height:250px !important;   */
}   
.video-js .vjs-tech{
 /* max-height:75% !important;  */
}
/* end Video Code changes */

Code below For reference (any ideas):

 <video id="my-video" class="video-js vjs-default-skin vjs-16-9" preload="auto" poster="MY_VIDEO_POSTER.jpg"  data-setup='{"controls": false, "autoplay": true, "preload": "auto", "muted": true, "loop": true}'>

                            <source src="content/video/video_hi.mp4" type='video/mp4' >


                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>

Upvotes: 2

Views: 7002

Answers (2)

Dave
Dave

Reputation: 71

They understood what I explained, and the idea they want cannot be achieved.

Upvotes: 2

Niklas Higi
Niklas Higi

Reputation: 2309

One solution would be to create a wrapper element, let's call it .video-wrapper and put the video tag inside it.

<div class="video-wrapper">
  <video src="..." autoplay></video>
</div>

You can then give the wrapper element the preferred height, center its children (similar to background-position: center) and hide the overflow. The video element now only needs to fill the width of the parent and you should be done.

.video-wrapper {
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.video-wrapper > video {
  width: 100%;
}

You can take a look at my CodePen to see how the result looks.

Upvotes: 2

Related Questions