Play Youtube Videos In A Responsive Modal - jQuery YT Player

Play Youtube Videos In A Responsive Modal - jQuery YT Player
File Size: 44.1 KB
Views Total: 30
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

YT Player is a fast and minimalistic video player web app for YouTube videos.

It's written in JavaScript (jQuery) and allows the user to play any Youtube Video in a modal popup. Just insert the Youtube Video URL inside the input field and then click the Play button.

It's also responsive which means it will automatically resize to fit any device, from desktop computers to mobile phones and tablets.

More Features:

  • Easy to implement.
  • Allows you to minimize & maximize the video player.
  • Supports keyboard shortcuts.

Keyboard Shortcuts:

  • Full screen f
  • Reload video r
  • Minimize video overlay m or _
  • Open video overlay o or +
  • Close video overlay Esc or x

How to use it:

1. Create an input field to accept the Youtube video URL.

<input
  id="input-field"
  type="url"
  autofocus
  required
  placeholder="enter youtube video url"
  title="enter a youtube video url"
  size="22"
  minlength="20"
  maxlength="80"
/>

2. Create a play button to open & play the Youtube video in a modal window.

<button
  id="play"
  title="play video url"
  disabled
>
  Play
</button>

3. Create the HTML for the Youtube Video Player.

<div id="overlay">
  <!-- Youtube Video Player -->
  <div id="overlay-content">
    <div>
      <button
        class="overlay-buttons transparent-button material-icons-round"
        title="close"
        >
      close
      </button>
      <button
        class="overlay-buttons transparent-button material-icons-round"
        title="maximize"
        >
      check_box_outline_blank
      </button>
      <button
        class="overlay-buttons transparent-button material-icons-round"
        title="minimize"
        >
      minimize
      </button>
    </div>
    <progress id="loader" title="loading video..."></progress>
    <iframe id="videoPlayer" loading="eager" allowfullscreen="true">
      <p>Your browser does not support iframes.</p>
    </iframe>
  </div>
  <!-- Settings Panel -->
  <div id="options-div">
    <button id="options-button" class="transparent-button material-icons-round">Settings</button>
    <div id="options-dropdown">
      <div id="reload" class="options">Reload video</div>
      <div id="private-mode" class="options" data-enabled="false" title="private mode is currently disabled(click to enable)">Private mode</div>
      <div id="open-video" class="options">Open video on Youtube</div>
    </div>
  </div>
</div>
<!-- Minimized Video Will Be Placed Here -->
<div id="expand-box" class="hidden">
  <img id="thumbnail" title="click to reopen minimized video">
  <div id="expand-hint-text">Minimized video</div>
</div>

4. Create the HTML for the Keyboard Shortcuts modal.

<div id="shortcuts-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
  <span
    id="close"
    class="overlay-buttons transparent-button material-icons-round"
    >close</span
  >
  <h3>Keyboard Shortcuts</h3>
  <p>Press <kbd>?</kbd> to toggle this modal.</p>
  <hr />
  <div>
    <p>Full screen <kbd>f</kbd></p>
    <p>Reload video <kbd>r</kbd></p>
    <p>Minimize video overlay <kbd>m</kbd> or <kbd>_</kbd></p>
    <p>Open video overlay <kbd>o</kbd> or <kbd>+</kbd></p>
    <p>Close video overlay <kbd>Esc</kbd> or <kbd>x</kbd></p>
  </div>
</div>
</div>

5. Load the needed jQuery library and Material Icons in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

6. Load the Youtube Video Player's JavaScript and CSS files in the document. Done.

<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>

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