How to Build a YouTube Video Website Background in HTML5 and CSS

CodingSam Norton • February 02, 2022 • 5 minutes READ

Big video backgrounds are a recent, and popular, web design trend. Browser-sized videos have brought about a new era of web design in a creative way. If implemented well, video backgrounds add dramatic effect to a site, making it more attractive and engaging to visitors.

Aside from the message, one cool thing about video backgrounds is that they play smoothly compared to JavaScript animated backgrounds that sometimes required the page to load a bunch of code and images before you saw the result of the animation.

Many companies such as Powerhouse company and Adidas are using background video to deliver a message or a story about products and services in an interesting way.

Although the common way to create one is by using the HTML5 video tag along with some CSS, it is worth considering using hosted videos on the web such as YouTube as the source of a video background. In this case, you don’t need to worry about slow server response because the site will load the video directly to YouTube.

In this article, I’ll show you how you can build a cool video background site using YouTube. We will use jQuery.mb.YTPlayer.js to customize and control the look of the YouTube video background design. Let’s get started.

Resources you need to complete this tutorial:

• Google Font (Railway and Lato)
• Font Awesome
• jQuery Library
• mb.YTPlayer

Set-Up

In creating a website with a video background, we must identify what the user should see as well as the set-up it should have. The following are the list of set up you should know before creating a video background site:

• The video must be 15-30 seconds long.
• It must be set to autoplay.
• Audio should be muted. (If you desire to put sounds, make sure it’s not annoying.)
• Make sure that text or headers in front of the video are readable.
• The message or the story of the video must be clear and concise.

HTML

Our markup will have three sections in particular with the following classes:

• Big-background
• About-section
• Small-background-section

The section with the class of big-background will stand as our video background section while our about-section and small-background-section class will be covered as our main content. We will wrap these two in a div with a class wrapper.

<section class="big-background">
    <!-- Big Background Content here -->
</section>

<div class="wrapper">
    <section class="about-section">
        <!-- About Section Content here -->
    </section>

    <section class="small-background-section">
        <!-- Small Background Section Content here -->
    </section>
</div>

Now it’s time to put the contents on each section. In the big video background and small-background-section, place a div with a class pattern to create a smooth texture wrap on our video background. All of the other content of each section will then contain an h1, h2, paragraph and a button link in a form of an anchor tag.

<section class="big-background">
    <div class="pattern"></div>
    <div class="big-background-container">
        <h1 class="big-background-title">YOUTUBE</h1>
        <div class="divider"></div>
        <h1 id="colorize">VIDEO BACKGROUND</h1>
        <a href="#" class="big-background-btn">Back to the Article</a>
    </div>
</section>

<div class="wrapper">
    <section class="about-section">
        <div class="about-section-container">
            <h2 class="about-section-title">USE A COOL YOUTUBE VIDEO BACKGROUND</h2>
            <p>Wondering how you might add a video background on your site? <br/>It's so easy! Introducing jQuery MB.YTPlayer, a jQuery plugin that enables you to display Youtube videos on your webpages. <br/>It's so awesome that it can transform your Youtube video into an HTML background at ease! No slow server loading time!</p>
            <a href="https://github.com/pupunzi/jquery.mb.YTPlayer" target="_blank" class="about-section-btn">Check it here</a>
        </div>
    </section>

    <section class="small-background-section">
        <div class="pattern"></div>
        <div class="small-background-container">
            <h2 class="small-background-title"><span>Find us on social media</span></h2>
            <ul class="socials">
                <li><a href="https://www.facebook.com/designmodo" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></li>
                <li><a href="https://twitter.com/Designmodo" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></li>
                <li><a href="https://plus.google.com/+Designmodo" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></li>
            </ul>
        </div>
    </section>
</div>

I used Font Awesome social media icons to our small-background-section. Next, we will add markup for the big video background using the jQuery.mb.YTPlayer plugin. We will simply use an anchor tag and put all of the settings we need inside it. Place the code below just under section tag with a class of big-background.

<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=0WhoCe_2jpc', containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>

The following are the set-up that we used inside our anchor tag:

• class player – this class will be use later on by the mb.YTPlayer plugin to enable the video background
• videoURL – the link to the YouTube video
• containment – the CSS selector of the DOM element where you want to display the video background
• autoPlay – set the video background to automatic play (Boolean Value)
• mute – determines if the video should have a sound or not (Boolean Value)
• startAt – the particular timeline you want to start the video playing
• opacity – set the transparency of the video

CSS

Let’s start adding styles. First add general styles, which include basic rules such as the html, body, paragraph tags and an unordered list.

html {
    height:100%
}

body {
    font:15px/23px 'Raleway',sans-serif;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%
}

p {
    font-size:20px;
    line-height:140%;
    text-align:center
}

ul li {
    display:inline-block;
    list-style:none;
    padding-right: 10px;
}

Next, add a style on wrapper, pattern and divider class along with the colorize id.

.wrapper {
    z-index:600;
    position:relative
}

.pattern {
    background-image:url(../images/pattern.png);
    background-repeat: repeat;
    background-attachment:scroll;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0
}

.divider {
    background-image:url(../images/divider.png);
    display:block;
    width:300px;
    height:35px;
    margin:10px auto
}

#colorize {
    color:#f1c40f;
    font-family:'Lato',sans-serif;
    font-size:40px
}

Then style the big-video background section. Set the z-index to 550 and set-up the overflow attribute to hidden. This will make sure that the overflow content on YouTube videos will not be displayed on our site. The rest of the style will cover the title, buttons and the default image background (more on this later).

.big-background {
    z-index:550;
    text-align:center;
    height:100%;
    min-height:100%;
    position:relative;
    overflow:hidden
}

.big-background .big-background-container {
    width:830px;
    max-width:100%;
    display:inline-block;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}

.big-background-title {
    font-family:'Raleway',sans-serif;
    font-size:78px;
    color:#fff;
    font-weight:300;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:22px;
    padding-top:20px;
    display:inline-block;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position:top center
}

a.big-background-btn {
    font-family:'Lato',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
    background:transparent;
    border:2px solid #fff;
    padding:10px 14px;
    cursor:pointer;
    letter-spacing:2px;
    text-align:center;
    display:inline-block;
    -webkit-transition:.4s background ease;
    -moz-transition:.4s background ease;
    -o-transition:.4s background ease;
    transition:.4s background ease;
}

.big-background-btn:hover {
    color:#fff;
    background:rgba(255,255,255,0.20)
}

.big-background-default-image {
    background:url(../images/sunset.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    width:100%;
    height:100%;
    z-index:0;
    backface-visibility:hidden
}

Now let’s move on to our about-section. We will set up a background-color of white and give it a padding of 60px on the top and bottom and then 20px to the left and right side. The rest of the style will just be supplementary classes in our design.

.about-section {
    font-family:'Lato',sans-serif;
    color:#7f8c8d;
    background:#fff;
    padding:60px 20px
}

.about-section-container {
    text-align:center;
    padding-bottom:50px
}

.about-section-title {
    font-family:'Raleway',sans-serif;
    font-size:40px;
    background:#fff;
    color:#3d566e;
    padding:0 35px;
    margin-bottom:22px;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position:center center;
    text-transform:uppercase
}

a.about-section-btn {
    font-family:'Lato',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    text-decoration:none;
    color:#34495e;
    background:transparent;
    border:2px solid #34495e;
    padding:10px 14px;
    cursor:pointer;
    letter-spacing:2px;
    text-align:center;
    display:inline-block;
    -webkit-transition:.4s background ease;
    -moz-transition:.4s background ease;
    -o-transition:.4s background ease;
    transition:.4s background ease;
}

.about-section-btn:hover {
    color:#fff;
    background: #34495e;
}

For our small video background, which will also serve as our footer, we will set the width by 100% and will hide the overflow content using the overflow attribute. We will also add some padding on the top and the bottom to make enough space to show our video background on the bottom. We will also put some styles on our class social anchor tags as well as on its hover state.

.small-background-section {
    font-family:'Raleway',sans-serif;
    padding:100px 0;
    position:relative;
    width:100%;
    overflow:hidden
}

.small-background-container {
    position:relative;
    text-align:center
}

.small-background-title {
    font-size:40px;
    color:#f1c40f;
    font-weight:300;
    z-index:10;
    display:inline-block;
    text-transform:uppercase;
    margin-bottom:20px;
    margin-top: 20px;
    position:relative;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position:top center
}

.socials a {
    color:#fff
}

.socials a:hover {
    color:#bdc3c7
}

Media queries

To make our site responsive, let’s add some media queries to our style sheet.

@media screen and (max-width: 768px) {
.about-section-title {
    line-height:1
}
}

@media screen and (max-width: 480px) {
.big-background-title {
    font-size:58px
}

.small-background-title {
    line-height:1
}

/*.player{ display: none;}  -> If you want to remove the video bg on a specific viewport w/o plugin*/
}

@media screen and (max-width: 360px) {
.big-background-title,#colorize {
    line-height:1
}
}

@media screen and (max-width: 320px) {
.small-background-title {
    font-size:30px
}
}

jQuery

It’s now time to enable the YoutTube video background. Call the class player inside jQuery codes. Place the following code below just before the closing body tag and wrap it inside <script> </script> tags.

$(function(){
  $(".player").mb_YTPlayer();
});

Fallback

The YouTube video background will not work on mobile and tablet devices due to the restriction policy followed by all on managing multimedia files via JavaScript. By default it returns to the original player format when use on the said devices.

However, we can use some jQuery remedy to add a default background image when the browser detected that the user views the site on devices.

Manual Solution

To detect if a user is browsing on a mobile or tablet device, we can set the element to hidden on a particular viewport and then manipulate it using jQuery codes. To do this, let’s say we want to remove the background video on 480px viewport. Simply, add display: none to the player element on that particular viewport. Check out the code below:

@media screen and (max-width: 480px) {
.player{ display: none; }
}

Now to manipulate this on our jQuery code, we will set a variable is_mobile and set the value to false. Next, we will test if the player class was display to none. If it is true, we will add the big-background-default-image class to the class big-background and small-background-section to use a default background image. Otherwise, if it is false the YouTube video background will stay the same.

(function($) {
    $(document).ready(function() {
        var is_mobile = $('.player').css('display') == 'none';

        if (is_mobile) {
            // Conditional script here
            $('.big-background, .small-background-section').addClass('big-background-default-image');
        } else {
            $(".player").mb_YTPlayer();
        }
    });
})(jQuery);

jQuery Plugin Solution

The other way to set the default image background on mobile and tablet devices is by using the device.js ) jQuery plugin. This will make it easy to write conditional statement to determine the kind of the device the being use by adding class to the html tag. Using this plugin, we can simply use the following code instead.

(function($) {
    $(document).ready(function() {
 //Device.js will check if it is Tablet or Mobile - 
        if (!device.tablet() && !device.mobile()) {
            $(".player").mb_YTPlayer();
        } else {
            //jQuery will add the default background to the preferred class
            $('.big-background, .small-background-section').addClass(
                'big-background-default-image');
        }
    });
    })(jQuery);

On the code above, I used device.mobile() and device.tablet() methods to check if the users device is either mobile or tablet. If the conditional statement returns true then the big-background-default-image class will be added to big-background and small-background-section. Otherwise, the player class will still be active the YouTube background video will stay.

Wrapping Up

Video is great way to deliver messages to your audience. It can be a powerful element to add to your site, if implemented properly.

As web design continually grows and improve, I believe there will be more innovation on how we can use video as a part of a site element. I hope you learned something from this tutorial. Let me know if you have thoughts about it in the comments.