How to Create a Video Background With CSS

Jamie Juviler: Thanks!

If you want to engage first-time visitors on your website, you have about 10 to 20 seconds. To inject some life into your page content, you might want to try adding a background video with CSS.

Jamie Juviler via https://blog.hubspot.com/website/video-background-css

Here’s a video of what ABIGHAIRY.COM is doing now:

Here’s the source code to ABIGHAIRY.COM right now:

<?php
$title = "Complete and Total Market Domination";

require "head.php";

?>
<!--
2023-08-01 Joe Winett: I looked up a couple of pages while doing this.  Some of the code is copied herefrom. 
    
    https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

    What you're reading here was learned from Jamie Juviler's

    How to Create a Video Background With CSS

    https://blog.hubspot.com/website/video-background-css

    WAIT!  When did they add "vh" and "vw" css units?  Nice.

-->

<style>
    #background-video {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
    }

        a, h1, h2 {
        color: white;
        font-family: Trebuchet MS;
        font-weight: bold;
        text-align: center;
    }

    h1 {
        font-size: 6rem;
        margin-top: 30vh;
    }

    h2 {
        font-size: 3rem;
    }

    

    #stuff {    
        font-size: 1.5rem;
        text-align: center;
    }

    #stuff ul {
        list-style: none;       
        
    }
    #stuff ul li {
        display: inline;
        margin-right: 2vw;
    }


    @media (max-width: 750px) {
        #background-video {
            display: none;
        }

        body {
            background: url("media/Joe-Winett-slow-motion-face-slap-poster.jpg") no-repeat;
            background-size: cover;
            background-position: center;
        }

        h1 {
            font-size: 4rem;
        }

        h2 {
            font-size: 2rem;
        }
    }
    
</style>




<?php
require "body.php";
?>

<video id="background-video" autoplay muted loop poster="media/Joe-Winett-slow-motion-face-slap-poster.jpg">
    <source src="media/Joe-Winett-slow-motion-face-slap-2.mp4"/>
    <track src="media/Joe-Winett-slow-motion-face-slap.en.vtt" kind="subtitles" srclang="en" label="English Subtitles"/>
</video>


    
    <h2>A Big Hairy LLC of Oklahoma</h2>
  
<div id="stuff">
    <ul>

        <li>
            <a rel="me" href="https://www.teddybear.com/">TEDDYBEAR.com</a>
        </li>
        <li>
            <a rel="me" href="https://www.karenware.com/">KARENWARE.com</a>

        </li>

        <li>
            <a rel="me" href="https://winett.com/">WINETT.com</a>

        </li>

        <li>
            <a rel="me" href="https://www.abighairyspider.com/">ABIGHAIRYSPIDER.com</a>

        </li>
        <li>
            <a rel="me" href="https://www.clickytwisty.com/">CLICKYTWISTY.com</a>

        </li>
        <li>
            <a rel="me" href="https://www.syihosting.com/">SYIHOSTING.com</a>

        </li>
    
    </ul>
</div>


<?php

require "foot.php";