When you embed a YouTube or any other video, your visitor’s browser will need to make a number of extra requests to render your page. With YouTube, the number of requests is 4, 3 for three different resolutions and 1 for the still image used as a video cover. It gets even worse when you embed a video that has ads running – several more requests are added. Naturally, your site will load slower and if you have a half a dozen videos on the page … you do the math, this could be a half of the total requests. What’s even worse is that these requests to external resources cannot be controlled, don’t have far future expirations and because of that will lower your overall speed scores.
To avoid all of the above nonsense, we’ll use lightboxes for our videos. By doing so you will first of all get rid of unnecessary server requests and speed up your site. These requests will be made only when the video is actually played.
The second benefit is a nice crisp video cover with a big button (you’ll have to make it) in place of whatever that thing is we get from YouTube. Your videos will get more views!
And third, your visitor will not be distracted from your video when it opens in a fullscreen lightbox.
If you’re using X theme, like I am, here’s the X iLightbox shortcode:
[image class="video-lightbox" src="//yourdomain.com/wp-content/uploads/the_rest_of_the_path_to_your_cover_image.jpg" link="true" href="//www.youtube.com/embed/your_video_ID?rel=0&autoplay=1" lightbox_video="true"][lightbox selector=".video-lightbox"]
The ?rel=0 in the shortcode is a tweak that prevents YouTube from showing other people’s videos on your site when yours is done playing and autoplay=1 means that the video will autoplay when the cover image is pressed.
If you have several videos on a page and you want them to play in separate lightboxes, then you need to assign unique classes to cover images and matching unique lightbox selectors. For example, with 3 videos you can use video-1, video-2 and video-3 image classes and .video-1, .video-2 and .video-3 lightbox selectors.
If you’re using Vimeo, Wistia, etc. change href to what’s appropriate.
If you want to make your site blazing fast in under 2 hours, sign up for my full WordPress Speed Secrets video tutorial.
Was this article useful? If so, please share it.