https://i.ytimg.com/vi/VpFTj3Q7DVM/hqdefault.jpg
This tutorial will show you in just over 10 minutes how to create a stunning video background on your website.
We’re going to be using the latest techniques and a small JS helper to allow it to work perfectly on internet explorer as well.
When I say the right way, I mean the best possible way so it is supported on most devices.
We will be using: HTML5, CSS, Bootstrap and object-fit-videos.js, accessible here: https://github.com/TricomB2B/object-fit-videos.
It’s highly advisable to use SASS for this for ease of use, but I’ve done it using plain CSS.
An HTML5 Full Screen Video on your website can make a massive impact. It’s an amazing thing if done right. You want to also make sure your Full screen HTML video works on as many devices as possible. Hopefully this tutorial will assist you in learning how to do that!
Original source
5 responses to “Full Screen Video Background (The Right Way) using HTML, CSS, Bootstrap”
Awesome tutorial thank you so much! I have one question, is the a way to have the h1 a little higher and have about 2 paragraphs or 2 columns of text below the header?
Thank you in advance!
hey, #hero video, u put this property: background-position: absolute. Is that right? php storm says its an error, I also googled it, there is no such thing as background-position: absolute
What is the preferred size for a video file?
Great tutorial!!!
What is text "flex box"