Play Video In Background Using Youtube Player API

Fullscreen background video РSimple JavaScript solution to use Youtube video as full-screen wallpaper(background) for your website using Youtube Player Iframe API.

(Bootstrap + jQuery) A Responsive Custom YouTube Player With Horizontal Playlist

How to make use of it:

1. Create a container for the video background and specify the Youtube Video Id within the data-video-id attribute:

<div id="youtubeEmbed" class="bg_video" data-video-id="Tb1lR8Z5oM"></div>

2. Make the video background fullscreen.

.bg_video, iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  /* 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh;
  /* 16/9*100 = 177.77 */
}

iframe {
  opacity: 0;
}

iframe.loaded {
  opacity: 1;
}

3. The JavaScript to load Youtube Video.

// Get element
var youtubeEmbedElement = document.getElementById("youtubeEmbed");

// Add YouTube API script
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
var videoId = youtubeEmbedElement.dataset.videoId;
var startSeconds = 184;
var endSeconds = 210;

onYouTubeIframeAPIReady = function () {
  player = new YT.Player("youtubeEmbed", {
    videoId: videoId, // YouTube Video ID
    playerVars: {
      autoplay: 1, // Auto-play the video on load
      autohide: 1, // Hide video controls when playing
      disablekb: 1,
      controls: 0, // Hide pause/play buttons in player
      showinfo: 0, // Hide the video title
      modestbranding: 1, // Hide the Youtube Logo
      loop: 1, // Run the video in a loop
      fs: 0, // Hide the full screen button
      rel: 0,
      enablejsapi: 1,
      start: startSeconds,
      end: endSeconds
    },
    events: {
      onReady: function (e) {
        e.target.mute();
        e.target.playVideo();
      },
      onStateChange: function (e) {
        if (e.data === YT.PlayerState.PLAYING) {
          document.getElementById("youtubeEmbed").classList.add("loaded");
        }

        if (e.data === YT.PlayerState.ENDED) {
          // Loop from starting point
          player.seekTo(startSeconds);
        }
      }
    }
  });
};

Fullscreen Background Video Using YouTube Player API, Fullscreen background video Plugin/Github

Youtube-Player-API-Demo


See Demo And Download

Official Website(objoe): Click Here

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

Related Posts

Iconpicker-Bootstrap-5

[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based¬†icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…

bootstrap-multiple-image-upload-with-preview

Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…

Animating-Split-Flap-Displays-fallblatt

A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

jQuery-SyoTimer-Plugin

jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…

vue-js-periodic-table

Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…