Use Youtube Videos As A Fullscreen Background - youtube-background.js

Use Youtube Videos As A Fullscreen Background - youtube-background.js
File Size: 6.23 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery Youtube Video Background plugin which makes Youtube videos behavior like a covering background.

Fully responsive and automatically adjusts the aspect ratio to fit the screen size after the viewport changed.

How to use it:

1. To use the plugin, include the JavaScript jquery.youtube-background.js after the latest jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="jquery.youtube-background.js"></script>

2. Embed a Youtube video into the document by insert the video URL in 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. That's it.

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

4. Override the default video settings (loop, mute, autoplay, show/hide controls, etc).

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
  }
});

This awesome jQuery plugin is developed by stamat. For more Advanced Usages, please check the demo page or visit the official website.