I’ve never used a background video until now, hence this rather fundamental question. My video fills the width of the browser window, which is what I want. But I want to know how to make the video height vary in proportion (16x9) to the width of the video (as the window is resized, used on mobile, etc), such that the bottom of the video is never truncated.
If I add lots of content into the Bloc where the video is used, this is a non-issue. But I am speaking about a case where there is not a lot of content in that bloc, yet I want the video to be the same 16x9 aspect ratio regardless of browser window size.
Well, it seems that my aim is either impossible or fraught with trouble. So instead of a background video, I will use a normal video set to Auto Play.
QUESTION: I know how to Hide Controls, but how do I allow the user to click to stop/play? The appearance of the controls during the first part of playback looks bad, so I want to hide the controls. But in the event the video does NOT autoplay in the browser, I need a way for the user to click the video to play it.
So this is the code I have used before. It could probably be tidied up a bit But it was made for a hero image. You will need to tweak it for your own use.
I ended up doing it this way, because Chrome dropped support for doing this via media queries.
Basically allows you to have a smaller video for mobile and larger video for desktop. It places a video as a background inside a div, and the padding makes the video visible.
CSS - work out the padding, by taking the video ratio and dividing (h / w). eg. 16x9 = 56.25%. My situation required a custom ratio. Bootstrap does have some standard classes such as “embed-responsive embed-responsive-16by9”. Which maybe more suitable for your use.
I interpret your meaning above to say that you’ve used the code in the past but either deleted the code from an existing website (which is why you cannot provide the URL) or it’s being used on a secretive client website where you cannot reveal the URL.
Not really, it’s a dynamic background video that keeps a fixed ratio. Not much to see.
The advantage of changing the video for mobile… apart from file size, if you can crop the video so it’s not so narrow in height on smaller screens. It all depends on your design.
Just getting in before the possible millon questions