bootstrap html5 code to make background video responsive

Aleks
Aleks used Ask the Experts™
on
I have an HTML5 bootstrap website that has a video as the background on the home page.

The problem is if that I maximize the screen the video remains smaller. It's not responsive.
How can I make it responsive so that the video gets bigger if the screen gets bigger (I know the quality may be impacted but I am OK with that)

Here is my current code:

<video autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>

Open in new window


I am just using a sample video from the template.
Also, can we modify the code so that it uses a vimeo video instead?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You can place it into a div that have a 100% width, do not set  video dimension.

or you can add a class for all video
video {
  width: 100%    !important;
  height: auto   !important;
}

Open in new window


To have a better result you can use a script
http://fitvidsjs.com/
https://videojs.com/

a tutorial
https://startbootstrap.com/snippets/video-header/

Author

Commented:
I saw that tutorial,. but I don't see how any of the above would support displaying a vimeo video.

Author

Commented:
I found this as well ... Ill try this which seems easier, if that doesn't work Ill check your option.

https://codepen.io/abennington/pen/ZONqqv
Commented:
This was the easiest solution. While the options above may work they seemed like they required more components or work. This example includes the stylesheet and the html code to display the vimeo video.

https://codepen.io/abennington/pen/ZONqqv

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial