As part of my daily job, I deal with many clients that have their own YouTube channel and use this powerful service for hosting their videos. Clients want to embed their videos on their website. Sometimes they want many videos on the same page.
Embed Video Page Speed Problem
Page speed is a really important factor. It directly impacts the user experience. Guess who cares about user experience and pages speed? Google!
Extracting the Youtube Video ID
Each YouTube video has a unique ID that is a combination of digits and alphabets. As of today, the length of this ID is 11 letters. But you never can count on the length of IDs as the system grows and they will start using longer IDs. The first part of the project was to create a regular expression pattern to extract the ID from the YouTube video URL. Following is the regular expression that I used for the YouTube video ID extraction.
let regexPattern = /^.*((v\/)|(\/u\/\w\/)|(embed\/))\??([^#\&\?]*).*/;
Retrieving the Thumbnails
YouTube produces and stores various quality versions of the video thumbnail picture. These thumbnails are being stored on a content delivery network (CDN). As of today, you can retrieve the thumbnail image by accessing the CDN URL using the unique video ID. The following example retrieves the high-quality version of the video thumbnail image. I have a plan to improve the technique that I am using for retrieving the video thumbnail as the current method is unreliable. Youtube may change the CDN URL structure. The most reliable way to retrieve a Youtube video thumbnail is by using Youtube API. Youtube API requires an API key. I consider this a disadvantage as we need to ask our clients who are not tech-savvy to apply for the API key.
let thumbnailSrc = 'https://i1.ytimg.com/vi/'+videoId+'/hqdefault.jpg';
Video Video Autoplay
In this project, after the user clicks on the video thumbnail, a modal window opens and show the video. First I tried to create an iframe using the unique video ID and embed it in the modal. However, a Youtube video added dynamically using Iframe wouldn’t autoplay and requires the user to do a second click on the play icon. Then, I learn about Youtube Iframe API. Youtube Iframe API doesn’t require an API key and would let us generate a Youtube video embed with auto-play capabilities. Therefore I used Youtube Iframe API to add the video Iframe to the modal.
The project is available at my Github repository and you can see the demo here.