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.
YouTube uses iframe for allowing users to embed videos on their websites. Each iframe embed loads many resources like CSS, JavaScript, images and the actual video. Now imagine you are embedding 30 videos on the same web page. The number of resources that are needed to be load is going to be very high. Therefore, this will decrease the page speed significantly.
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!
I decided to create a simple and light JavaScript library to find and replace all embed iframes on a page with their thumbnail image. Then, load the actual video on-demand after the user clicks on the thumbnail.
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.