• Monday , 13 July 2020

Full Screen Video Background (The Right Way) using HTML, CSS, Bootstrap

Code Canyon
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

3d Ocean

Related Posts

5 Comments

  1. SouL KE0MUY
    July 25, 2019 at 14:29

    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!

  2. Vladimir Vaisov
    July 25, 2019 at 14:29

    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

  3. Andrey Bondarev
    July 25, 2019 at 14:29

    What is the preferred size for a video file?

  4. Mark Plante
    July 25, 2019 at 14:29

    Great tutorial!!!

  5. Lionsgate Movies LionS HearT
    July 25, 2019 at 14:29

    What is text "flex box"

Leave A Comment

You must be logged in to post a comment.