Full browser video, video ratio

HTML & CSS
1

Hi all

I’m trying to create a full browser width video similar to this example:

Creating the full width responsive video is simple enough:

http://www.ttmt.org.uk/video/

My problem is the height of the video when the broswer is full width. The video is too tall and fills the whole of the screen.

It would be better if the video was a different ratio but I don’t think that wouldn’t work.

Is it possible to place the video in a container and give that a height that will mask part of the height of the video. I don’t mind cutting some of the vidoe off.

2

I should think you could just place a wrapper around your video wrapper and set the max-height that you want and then set it to overflow:hidden. (You will probably also need position:relative on the wrapper.)