📺 youtube-background

Another 100 liner in a form of a simple script (or jQuery plugin) to facilitate YouTube embeds as a cover background using YouTube Embed API.

I wrote this code several times over the years and never bothered to make it reusable. Now when I needed it again I could not even find where I wrote it last...

Goodbye careless days... I'm getting old...

DEMO HERE ➡️

Features

• Play/Pause button
• Mute/Unmute button
• Video will pause when not visible
• No CSS required
• No longer jQuery dependant

Installation

As a JS module

To install the package from NPM run the good old command

npm install youtube-background

To import it in your script add:

import 'youtube-background';

Don't forget to point your bundler to use node_modules as an include path.

If you wish to use it as a jQuery plugin, make sure you import jQuery as well.

Over CDN

<script type="text/javascript" src="https://unpkg.com/youtube-background/jquery.youtube-background.js"></script>

or minified:

<script type="text/javascript" src="https://unpkg.com/youtube-background/jquery.youtube-background.min.js"></script>

Usage

Usage is pretty simple, add a data attribute data-vbg containing a full YouTube, Vimeo or video file link or just the YouTube or Vimeo ID.

You can trigger all elements containing the noted attribute with $("[data-vbg]").youtube_background();, or specify your selector, on jQuery document ready event.

Note: From version 1.0.6 jQuery is no longer a dependency, but purely optional. To initialise youtube video backgrounds without jQuery use: new VideoBackgrounds('[data-vbg]');.

P.S. https://www.youtube.com/player_api is injected automatically, only once per script init. I've seen some implementations like Elementor WP plugin that inject it several times, for no reason. Anyway, you're welcome.

Quick Example

    <style>
        /* optional css fade in animation */
        iframe {
            transition: opacity 500ms ease-in-out;
            transition-delay: 250ms;
        }
    </style>

    <!-- target element -->
    <div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>

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

Properties

Noted properties can be added as html attributes as:

• data-vbg-play-button
• data-vbg-mute-button
• data-vbg-autoplay
• data-vbg-mooted
• data-vbg-loop
• data-vbg-mobile
• data-vbg-offset
• data-vbg-resolution
• data-vbg-fit-box
• data-vbg-load-background
• data-vbg-poster
• data-vbg-inline-styles
• data-vbg-start-at
• data-vbg-end-at
• data-vbg-always-play
• data-vbg-volume
• data-vbg-no-cookie

Vimeo support

Available properties for Vimeo backgrounds:

• muted
• loop
• mobile
• resolution
• inline-styles
• fit-box
• offset
• play-button
• mute-button
• poster
• start-at
• end-at
• always-play
• volume
• no-cookie

HTML5 Video support

Available properties for HTML5 Video backgrounds:

• autoplay
• muted
• loop
• mobile
• resolution
• inline-styles
• fit-box
• offset
• play-button
• mute-button
• poster
• always-play
• volume

Example - Properties as HTML attributes

    <div data-vbg-play-button="true" data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>

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

Example - Properties as JSON

    <div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('[data-vbg]').youtube_background({
                      'play-button': true
                  });
        });
    </script>

Events - Youtube and HTML5 video

• video-background-play - video starts playing
• video-background-pause - video is paused
• video-background-mute - video sound is muted
• video-background-unmute - video sound is unmuted

Events bubble. If you go vanilla, you can get the video object via event.detail.

Development

Development setup uses POOPS bundler to bundle ES modules into IIFE jquery.youtube-background.js and jquery.youtube-background.min.js

POOPS is a simple bundler + static site builder that I've created, do give it a try and let me know what you think. It's still in early development, but it's already quite useful.

To install the required package for running POOPS, run:

npm install

To run the server on http://localhost:4040, run:

npm run dev

Code will automatically be packaged into IIFE while you develop, and the page will automatically reload on changes.

To just build the code, without running the local server, run:

npm run build

THE END.