Embedding YouTube videos as a background cover

1. Introduction

jquery.youtube-background is a jQuery plugin that allows you to put any YouTube video as a cover background. This plugin needs a little configuration, the only thing you have to do is to create a DIV panel with a special attribute where you put a URL to the YouTube video. jquery.youtube-background will automatically resize the video to available screen size.

2. Plugin Overview

Demo

3. How to install and use jquery.youtube-background jQuery plugin

To install jquery.youtube-background jQuery plugin, follow these steps.

1. Load jQuery and jquery.youtube-background JavaScript into your HTML page:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- YT Video Background JS -->
<script type="text/javascript" src="js/jquery.youtube-background.js"></script>

2. Create DIV element with unique ID and special attribute data-youtube that will be used as video background:

<div id="wdqf123" data-youtube="https://www.youtube.com/watch?v=Wimkqo8gDZ0"></div>

3. Initialize jquery.youtube-background plugin in jQuery document ready function:

<script type="text/javascript">
        jQuery(document).ready(function() {
            $('[data-youtube]').youtube_background();
        });
</script>

jquery.youtube-background plugin after initialization will start displaying selected YouTube video on the background of DIV. Video will be playing in a loop.

4. Conclusion

In this article, we presented jquery.youtube-background jQuery plugin that allows you to display any YouTube videos on the background of the website. This kind of feature is a new trend in web designing and can give a nice eye-catching result. Getting started with the plugin is simple. Without JavaScript knowledge, you can configure it and start using it right away.