Play Youtube Video Builder in Background in HTML5

HTML5 Background Video Builder is a simple jquery-based plugin that helps create a responsive html5 video in the background. Placing background videos in the first fold section or anywhere else is a very popular and popular trend on the website.

youtube video html, youtube iframe api, youtube iframe api npm, javascript video player, youtube embed autoplay

How to make use of it:

1. To start, insert the JavaScript jquery-tape-plugin.js and Stylesheet jquery-tape-styles.css into the HTML doc.

<link href="jquery-tape-styles.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery-tape-plugin.js"></script>

2. Then define the path to the HTML5 video that might be used as a background in a particular container.

<div class="container" 
     id="example" 
     data-mp4="1.mp4" 
     data-webm="1.webm">
     <div class="content">Any Content Here</div>
</div>

3. Apply a height property to the container and make it relative positioned.

.container {
  width: 600px;
  height: 450px;
  position: relative;
}

4. Finally, call the function buildHtmlVideo on the container and complete it.

buildHtmlVideo({
  parentElement: $("#parentContainer")
});

5. Determine whether or not to autoplay the HTML5 video on mobile, tablet, or desktop.

buildHtmlVideo({
  parentElement: $("#parentContainer"),
  playInMobile: true,
  playInTablet: true,
  playInDesktop: true
});

6. Specify a fallback picture for the video background.

buildHtmlVideo({
  parentElement: $("#parentContainer"),
  fallbackImage: "1.jpg"
});

7. Override the default data attributes:

buildHtmlVideo({
  parentElement: $("#parentContainer"),
  webmVideo: $("#parentContainer").attr("data-webm"),
  mp4Video: $("#parentContainer").attr("data-mp4")
});

8. Execute a callback function when the plugin has been initialized.

buildHtmlVideo({
  parentElement: $("#parentContainer"),
  callback: function() {
    console.log("Build complete");
  }
});

9. To show content on the top of the video background, remember to make the position absolute and modify the z-index property slightly.

.content {
  z-index: 9999; 
  position: absolute; 
  top:2rem; left: 2rem;
}

Put HTML5 Video As A Background In HTML, HTML5 Background Video Plugin/Github


See Demo And Download

Official Website(sricharankrishnan): Click Here

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

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…