How to Build a YouTube Video Website Background

  •  23 Comments

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:

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>

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;}  -&gt; 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(){
      $(&quot;.player&quot;).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 = false;

    if( $('.player').css('display')=='none') {
        is_mobile = true;
    }
    if (is_mobile == true) {
        //Conditional script here
        $('.big-background, .small-background-section').addClass('big-background-default-image');
    }else{
        $(&quot;.player&quot;).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 (http://matthewhudson.me/projects/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 - http://matthewhudson.me/projects/device.js/
        if (!device.tablet() &amp;&amp; !device.mobile()) {
            $(&quot;.player&quot;).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.

Newsletter

23 Comments
  1. Kimberly Feb 2, 12:49 pm

    Thanks for the quick tutorial. This one is really helps a lot. Again, thanks for sharing!

    Reply
    +1
  2. Sebastian Feb 2, 6:27 pm

    Howdy, nice article, but..the ads are present and that kinda ruins everything.

    Reply
    0
    • Adrian Feb 2, 6:31 pm

      You can upload your own video and deactivate the video ads from your youtube account.

      Reply
      +1
  3. Clickingmad Feb 2, 8:32 pm

    What physical size do you recommend for the actual movie? Bearing in mind different screen sizes etc.

    Reply
    +1
  4. Ernesto Feb 2, 9:49 pm

    Just what I was working on this morning…

    Thank you!!!

    Reply
    +1
  5. Jeremiah Feb 3, 8:31 am

    Great tutorial! Thanks for sharing this cool stuffs here. Embedding youtube videos as a video background has been a headache for years but this plugin will surely help a lot. Thanks!

    Reply
    +1
  6. Gareth Feb 4, 10:42 pm

    This isn’t actually new, maybe it’s a trend (again) but it’s actually pretty old.

    There are so many website that are cheesy and badly designed with gif/animated backgrounds and this is just an evolution of such cheesiness from marketers trying to make this idea cool again. Just imagine the bandwidth you expect your potential clients should have to actually make this an enjoyable experience.

    Wouldn’t bother investing time or money in this, unless you want your website to have “pop” as recommended by somebody’s grandmother and perhaps add a few kittens, because everybody loves kittens.

    Speaking from more than 12 years of experience in the industry unlike the author with 2 years…

    Reply
    0
    • Jack Dawson Feb 11, 3:19 pm

      Funny, I was thinking the same thing. This remindes me of the flash video craze of 15 years ago. Bad idea then and still a bad idea.

      Reply
      0
      • Gareth Feb 11, 5:49 pm

        Jip, that as well… very bad idea, but I guess it’s hip to rebrand old stuff as new stuff…

        Reply
        0
  7. Rodel Feb 10, 10:38 am

    Works in modern designs and different screen sizes! Thanks!

    Reply
    0
  8. Don Feb 12, 6:25 am

    This is great and I love the plugin. What I’d like to know is how to have the background video in a section that contained it and allowed a user to scroll down without the BG vid remaining in the window?
    The wrapper div keeps the vid in the window and scrolls the content over it. What I want is for the vid backgroud to fill the window initially but to scroll with the rest of the page.
    Any takers?

    Thanks!

    Reply
    +3
  9. Marco Feb 17, 6:27 am

    Is that video Costa Rica? I ask because I live there…. :D

    Reply
    0
  10. Kim Apr 8, 4:58 am

    Thanks for the awesome example! Is there any way that one could display a static image in the background until the video loads? There is a bit of delay before the video begins and I’d prefer to display an image instead of the grey overlay. Thanks!

    Reply
    +1
  11. Edson May 12, 11:11 pm

    Totally awesome! Can I do this with Vimeo videos? I mean, is there a JS lib for Vimeo also?

    Reply
    0
  12. Janez Jun 29, 12:48 pm

    Hi, is it possible to implement with playlist?

    Reply
    0
  13. jim Jul 5, 8:09 pm

    Is there a way to solve the delay of video start on page load? There is plenty of delay, otherwise this is just awesome!!! Thanks

    Reply
    +1
  14. Steve Dec 12, 11:04 pm

    It’s awesome! Thank you!
    Have someone had an issue with video not playing in Chrome on Windows 8.1 ()? in Firefox everything is ok and video is playing, but on my private CPU in Chrome video won’t play.
    It is interesting that on my business CPU in Chrome there is no problem at all.
    Both versions of Chrome are updated.

    Reply
    0
  15. derek Jan 6, 8:20 pm

    Is there a way to add a custom image to display before the video loads?

    Reply
    0
  16. Ed Feb 12, 8:03 pm

    Hi Guys,

    I noticed some of you were asking in the comments for an image to be in place of the video whilst it loads. I was also wondering the same and ended up working out a quick fix method of it.

    What you can do is add to the body tag: background=”image.jpg” and this worked for me. I’m sure it’s not the ‘done’ way of doing things though but it worked.

    Hope this helps someone. I’m no expert but it worked for me.

    Reply
    0
  17. Erblin Feb 17, 5:02 pm

    Uncaught TypeError: $j(…).mb_YTPlayer is not a function.

    Can you help me with this one !!
    I got stuck for hours trying to fix it, and nope …

    P.s. I’ve use another jQuery library on my website. [ Code below ]

    var $j = jQuery.noConflict(true);

    $(document).ready(function(){
    console.log($().jquery); // This prints v1.3.2
    console.log($j().jquery); // This prints v1.11.1
    });

    Reply
    0
  18. Aleks Feb 23, 1:10 pm

    Thanks a lot!
    But… the background video does not work on my iPad, in Safari browser…. Is there any solution?
    Many Thanks

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters