Play Youtube Videos In A Responsive Modal - jQuery YT Player

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>

Changelog:

2024-03-01

• refactor: remove unnecessary variable

2023-12-21

• feat(thumbnail): display private mode indicator
• fix(context menu): don't override context menu over links

2023-09-19

• Update CSS & JS

2023-03-30

• Use a ternary for privateMode setter instead of if statement

2023-03-30

• CSS update

2023-03-28

• CSS update

2023-03-06

• Fix input-field cursor

2023-02-27

• JS & CSS update

2023-02-02

• JS & CSS update

2023-01-25

• JS & CSS update

2023-01-24

• General refactoring

2023-01-20

• Refactor overlay minimizing function

2023-01-19

• Open video with private mode if shift is held down

2023-01-05

• Prevent default action if a keybind is pressed

2023-01-04

• Update styles

2022-12-28

• Update alert text
• Change cursor when input-field is focused

2022-12-27

• Make tooltip text more concise

2022-12-26

• Fix videos with several parameters not playing

2022-04-22

• JS & CSS updated

2022-04-11

• Adjust iframe based on viewport units instead of rem

---

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