If you're using the WordPress featured images feature, there might be a couple of reasons…
If you’ve been following along with me for a little bit, you know that performance is extremely important to me. Lazy Loading images can go a long way towards making sure your site loads content quickly, then adds images only after users can see the page. Lazy Load for Videos takes this one step further, blocking the loading of external scripts and images from YouTube and Vimeo until a user clicks a play button.
What’s It Do?
When you embed a YouTube or Vimeo video on your WordPress site, you are attaching more than just the video file. In order to make the player and advanced features work, YouTube and Vimeo load external Javascript, CSS and image files. Lazy Load for Videos blocks the loading of all this extra stuff initially. Only when users click the play button on the thumbnail image will it be loaded in. Your users will barely notice, except for a slight delay after clicking the play button to when the video actually starts. But without needing to load all those extra files, you’ll see your page speed go up quite a bit, even for pages with just a couple of videos on it. Of course, the more videos you have, the more useful this is to you.
Lazy Load for Videos gives you control over how YouTube and Vimeo players look, what thumbnails to use, and whether or not functionality should be disabled. For YouTube, you have even more control and can choose what kind of theme the player should use after it’s loaded. You can also add in your own custom CSS if you’d like to style things differently.
How’s It Work?
After you install and activate the plugin, it will begin working on your embedded YouTube and Vimeo videos anywhere on your site automatically, using it’s default settings. This actually might be all you need to do. Just visit any page with an embedded video and you will see the thumbnail of your video with a play button on it. After you click the play button, the YouTube or Vimeo controls will load in and the video will start playing.
If you’d like a little more control over how the plugin functions, you can visit Settings -> Lazy Load for Videos. You will see three tabs up at the top, “YouTube,” “Vimeo,” and “Styling/Other.”
The YouTube tab allows you to customize the look and feel of YouTube videos. You can disable it altogether by checking the box next to “Do NOT use Lazy Load for Youtube.” Below that you can check the box to automatically show the title of the video before it is loaded. By default, users will only see a thumbnail and play button, but this option adds the title at the top of the box as well. Below this, you can customize the YouTube player itself. You can pick a Dark or Light theme for the player and choose whether or not the progress bar should be red or white. This is the theme and color of the controls shown after a video loads, where the YouTube video actually plays. You can also disable controls outright by checking the box next to “Don’t display player controls.” Lastly, you can choose to disable or enable related videos and widgets (only use if you know what that means), by using the provided checkboxes.
Customize YouTube look and feel
The Vimeo tab is a little more sparse, but the developer plans on adding more features soon. For now, you can choose to disable lazy loading for Vimeo videos or toggle on or off the title of the video before the video is loaded. You can also use a color picker to select a color for the Vimeo controls (playbar, buttons, etc.).
The General / Styling tab has a few options. The first is a simple checkbox, “Only load CSS/JS when needed “. This is useful for delaying the loading of external JS and CSS. I recommend switching it on and making sure videos load okay. You can also select a few different options for your play button, White, Black or YouTube button. Just select the play button you want to use from the drop-down menu. Next is “Thumbnail Size” which can be either “Cover” or “Standard.” The only difference is that “Cover” will use the background-size: cover CSS rule in order to try and stretch the thumbnail image over the entire container, even if that means that some of it gets cut off. Standard will simply format the image to the size of the container, sometimes leaving black bars on the top and bottom. And down at the bottom, you can enable TablePress support with a separate checkbox.
Some general settings
In this section is a text area for Custom CSS where you can add any styles you want to the videos. There’s not necessarily a whole lot you can do to the inner controls of the video players, but you can use this area to tweak the placement and font of your title and replace the play button. For instance, to swap out the play button on YouTube videos with one of your own you can add:
.lazy-load-youtube-div {
background-image: url(../path/to/your/image.png);
}
The plugin is more or less plug and play, so simply tweak the settings to taste and you’re all set.
Costs, Caveats, Etc.
Lazy Load for Images does use one external JS file and one external CSS file to do its magic but they are very lightweight and offer a huge amount of savings if you have even one video on your site. Where possible, use caching to concatenate these files with others. The plugin is fairly new but has had several updates already, with more features soon. If you are having a problem with it, you can visit the support forums for help from the developer.
