Background VIDEO - Maintain Proportions

I Need Help
1

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.

image
image490×658 93.5 KB

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.

Thanks.

2

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.

Thanks.

3

I have some code that allows you to have different background video based on breakpoints. But I’m not near my Mac at the moment.
I’ll post later.

2 Likes
4

So this is the code I have used before. It could probably be tidied up a bit :sweat_smile: 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.

<style>
.embed-responsive-hero {
   margin-left: auto!important;
   margin-right: auto!important;	
}
.embed-responsive-hero::before{
   padding-top:XXXX%!important;
}
video {width: 100%;}
</style>

Code Bric

<div>
<video id="herovideo" class="embed-responsive-hero" autoplay="autoplay" muted="true" playsinline="true" loop="loop" style="background-color: #000;"  preload="auto"></video>
</div>

Script - will adjust on window resize. Again probably a better way to write this.

<!-- Select Hero Video by Screen Width -->
<script>
  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("herovideo");
  var source = document.createElement("source");
  source.id = "hvid";
  source.setAttribute("type", "video/mp4");
  vid.appendChild(source);
  
  if (w.matches) {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "YOUR MOBILE VIDEO URL HERE");
    vid.setAttribute("poster", "YOUR POSTER URL HERE");
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "YOUR VIDEO URL HERE");
    vid.setAttribute("poster", "YOUR POSTER URL HERE");
    vid.load();
    vid.play();
  }

window.addEventListener("resize", function(){
  var w = window.matchMedia("(max-width: 768px)");
  var vid = document.getElementById("vid");
  var source = document.getElementById("hvid");
  
  if (w.matches) {
    vid.pause();
    source.src = "YOUR MOBILE VIDEO URL HERE";
    vid.setAttribute("poster", "YOUR POSTER URL HERE");
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "YOUR VIDEO URL HERE";
    vid.setAttribute("poster", "YOUR POSTER URL HERE");
    vid.load();
    vid.play();
  }
});
</script>
2 Likes
5

Can you provide a link to a demo or website where you have used that code before so I can see your implementation?

6

No, it’s implemented as above. I’m not providing any support, just offering what I’ve done in the past.

7

I wasn’t asking for support, actually.

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.

Understood.

8

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 :rofl: