Responsive Modal YouTube Player using jQuery

Aaron January 25, 2023


Live Preview Download

UnrealApex's YT Player is a fast and minimalistic video player web app for YouTube videos. YT Player 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 is also responsive which means it will automatically resize to fit any device, from desktop computers to mobile phones and tablets.

UnrealApex's YT Player Features

  • Easy to setup
  • Allows you to minimize & maximize the video player
  • Supports keyboard shortcuts
    • Full screen f
    • Reload video r
    • Minimize video overlay m or _(underscore)
    • Open video overlay o or +(plus)
    • Close video overlay Esc or x

UnrealApex's YT Player Implementation

Create an input field to accept the Youtube video URL

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

Create the HTML for the Youtube Video Player

Reload video
Private mode
Open video on Youtube

Create the HTML for the Keyboard Shortcuts modal

Load the needed jQuery library and Material Icons in the document

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


Next: Conversational Messaging: Why you should use it and how to incorporate it

also view other related posts,