Responsive Modal YouTube Player using jQuery

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

 Play

Create the HTML for the Youtube Video Player

  
  

    

      
      close
      
      
      check_box_outline_blank
      
      
      minimize
      
    
    
    
  
  
  

    Settings
    

      
Reload video
      
Private mode
      
Open video on Youtube
    
  



  
  
Minimized video

Create the HTML for the Keyboard Shortcuts modal

  close
  
Keyboard Shortcuts
  
Press ? to toggle this modal.
  

  

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

Load the needed jQuery library and Material Icons in the document

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