how do you make youtube videos play faster

Positioning the Youtube video image thumbnail that we will fetch and add in later through JavaScript.Īt this point, we should see these div elements begin to resemble a typical online video player, as follows: Clicking the play button won't play a video.Forming the second div to a play button and positioning it to the center of the first div.This number is derived from dividing 9 by 16 and multiply the resultant to 100%. In doing so, we set the padding-top of the first div to 56.25%. Retaining the (flexible) video aspect ratio at 16:9, which is the recommended aspect ratio for a Youtube video.2. CSSīorder-color: transparent transparent transparent #fff Īs you can see from the above code snippet, we have added a class to these div elements and a data- attribute to the first div to specify the ID of the Youtube video we’ll embed. The first div will wrap around the embedded Youtube video, the second div is nested in the first div, and we’ll use it to shape the Play button to illustrate that this is a playable video. This is straight forward we’re using just two div elements. This method is popularly known as lazy loading–it will minimise the HTTP requests on initial page load, and ultimately improve the page’s performance. So, instead of loading the Youtube video as soon as the page loads, we are going to pull and play the video when the user asks to do so. Total number of HTTP requests made when embedding two videos These numbers will climb as we embed more videos on the page. Doing so will improve the performance of our initial page load, and hand some power over to the user.Įmbedding a Youtube video has become a completely normal process for anyone involved with the web copy, paste, done. However, pulling in an external resource like a Youtube video may slow down a web page’s load performance, especially if there are two or more videos embedded on the same page.īy embedding videos we request more than just a video file. A number of resources are fetched, including JavaScript files, a stylesheet, images, and advertisements. And as you can from the screenshot below, two Youtube videos equates to 22 HTTP requests with a total of 624kb downloaded. In this tutorial I’ll explain how to “lazy load” multiple embedded YouTube videos.

How do you make youtube videos play faster