jquery.youtube-background

Simple jQuery Plugin for Embedding YouTube Videos As Cover Background

by

jquery.youtube-background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API.

There is another jQuery Youtube Video Background plugin that makes your Youtube videos look like a Cover Wallpaper. It is fully responsive and automatically adjusts the aspect ratio to fit the screen size after changing the viewport.

Features:

  • Fade in CSS animation
  • Play / Pause button
  • Mute / Unmute button
  • No CSS required
  • No longer dependent on jQuery

How to make use of it:

1. To use the plugin, embrace the JavaScript jquery.youtube-background.js after the most recent jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.youtube-background.js"></script>

2. Embed a Youtube video into the document by inserting the video URL within the data-youtube attribute:

<div id="ytbg" data-youtube="https://www.youtube.com/watch?v=IFSp2-CmQvk"></div>

3. Call the function to make the Youtube video fullscreen and act as a background.

$(function(){
  $('[data-youtube]').youtube_background();
});

4. Auto disable the Youtube video background on the cell.

$(function(){
  $('[data-youtube]').youtube_background({
    'mobile': true
  });
});

5. Display Play & Mute button on the Youtube Video.

$(function(){
  $('[data-youtube]').youtube_background({
    'play-button': true,
    'mute-button': true
  });
});

6. Determine whether or not to load and show the video cover because of the background earlier than loading the Youtube video player.

$(function(){
  $('[data-youtube]').youtube_background({
    'load-background': false
  });
});

7. Determine whether or not to auto-play the video on web page load.

$(function(){
  $('[data-youtube]').youtube_background({
    'autoplay': false
  });
});

8. Determine whether or not the video needs to be muted on web page load.

$(function(){
  $('[data-youtube]').youtube_background({
    'muted': false
  });
});

9. Determine whether or not to loop the video.

$(function(){
  $('[data-youtube]').youtube_background({
    'loop': false
  });
});

10. Determine the resolution of the Youtube video.

$(function(){
  $('[data-youtube]').youtube_background({
    'resolution': '16:9'
  });
});

11. Determine the offset in pixels. Useful to enlarge the video to cover the data components.

$(function(){
  $('[data-youtube]').youtube_background({
    'offset': 200
  });
});

12. Determine whether or not or to not set the player iframe to suit the container.

$(function(){
  $('[data-youtube]').youtube_background({
    'fit-box': true
  });
});

13. Enable/disable inline styles from the iframe and wrapper.

$(function(){
  $('[data-youtube]').youtube_background({
    'inline-styles': true
  });
});

14. You’re additionally allowed to go the choices by way of HTML data attributes:

<div id="ytbg" data-ytbg-play-button="true" data-youtube="https://www.youtube.com/watch?v=IFSp2-CmQvk"></div>

15. Override the default video player settings like a loop, mute, autoplay, show/hide controls, and so on).

ytp = new YT.Player($elem[0], {
  height: '1080',
  width: '1920',
  videoId: ytid,
  playerVars: {
    'controls': 0,
    'autoplay': 1,
    'mute': 1,
    'loop': 1,
    'rel': 0,
    'showinfo': 0,
    'modestbranding': 1
  },
  events: {
    'onReady': onVideoPlayerReady,
    'onStateChange': onVideoStateChange
  }
});

Use Youtube Videos As A Fullscreen Background, jquery. youtube-background Plugin/Github

See Demo And Download

Demo
Download

Official Website(stamat): Click Here

This superior jQuery/javascript plugin is developed by stamat. For extra Advanced Usages, please go to the official website.

Leave a Comment