Auto Stretch Youtube/HTML5 Video To Full Screen - VideoHero.js

VideoHero.js is a lightweight and configurable jQuery Video plugin for creating 'Hero' video on the webpage. Supports both Youtube and HTML5 videos.

The plugin automatically stretches the Youtube or HTML5 video player to fill the whole browser window while maintaining the original aspect ratio.

Also provides a volume control which enables the user to mute & unmute the playing video.

How to use it:

1. Load the stylesheet videohero.css in the header, and the JavaScript videohero.js after jQuery.

<link rel="stylesheet" href="dist/videohero.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous">
</script>
<script src="dist/videohero.js"></script>

2. Insert an HTML5 or Youtube video into the document using the following data attributes:

• data-provider: Youtube or custom
• data-videoid: Youtube video ID
• data-poster: poster image
• data-source: HTML5 video paths

<div class="video-hero" 
     data-provider="youtube" 
     data-videoid="d_fyd8xMDnQ"
     data-poster="https://i.ytimg.com/vi/d_fyd8xMDnQ/maxresdefault.jpg">
</div>

<div class="video-hero" 
     data-provider="custom" 
     data-source='[{"source":"1.mp4", "type":"video/mp4"}, {"source":"1.webm", "type":"video/webm"}]'
     data-poster="poster.jpg">
</div>

3. Initialize the VideoHero.js plugin and done.

$(".video-hero").videohero();

4. All default options to customize the plugin.

$(".video-hero").videohero({
  provider: "youtube",
  videoid: "",
  source: "",
  type:"video/mp4",
  poster: "",
  log: false,
  api: {
    url: "https://you-link.herokuapp.com/",
    param: "?url=https://www.youtube.com/watch?v="
  },
  attrs: {
    muted: true,
    autoplay: true,
    loop: true,
  },
  classes: {
    container: {
      wrapper: "videohero videohero-wrapper",
      preparing: "preparing",
      ready: "ready",
      error: "error",
      provider: "videohero-provider-"
    },
    video: "videohero-element",
    buttons: {
      mute: {
        self: "videohero-mute-button",
        on: "sound-off",
        off: "sound-on"
      }
    }
  },
  i18n: {
    "mute": "Sound off",
    "unmute": "Sound on"
  }
});

---

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