Youtube Video Background With Mobile Fallback - yt-video-background.js

Yet another jQuery based Youtube video background plugin with a graceful fallback to a specified background image on mobile devices.

See also:

• Video Background Plugin with HTML5 and Youtube API
• HTML5 Video Background Plugin With jQuery - covervid
• Fullscreen Vimeo Video Background - Vimelar
• Custom Vimeo Video Background Plugin with jQuery - Vimeofy

How to use it:

1. Load the stylesheet yt-video-background.css for the basic styling of the Youtube video background.

<link rel="stylesheet" href="dist/css/yt-video-background.min.css">

2. Load jQuery JavaScript library and the JavaScript yt-video-background.js at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/js/yt-video-background.min.js"></script>

3. Create a container to hold the Youtube video player.

<div class="video-background"></div>

4. Call the function youtubeBackground on the container element and specify the Youtube ID. Done.

$('.video-background').youtubeBackground({
  videoId: 'yxGXmjAkE5M'
});

5. Customize the color of the background overlay.

$('.video-background').youtubeBackground({
  backgroundColor: '#000000'
});

6. Customize the opacity of the Youtube video.

$('.video-background').youtubeBackground({
  opacity: 0.7
});

7. Specify the path to the fallback image when you run the script on mobile devices.

$('.video-background').youtubeBackground({
  backgroundImage: 'bg.jpg'
});

---

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