Placeholder canvas

The Right Way to Embed Videos on WordPress

Remember those endless moments waiting for YouTube videos to load? If you didn’t have that super-speedy internet connection, you’d click a video, hit pause, and go make a sandwich. By the time you were back, maybe, just maybe, you’d have a few buffer-free minutes to enjoy.

Good news! Those days are a blurry memory. Thanks to cool tech stuff like prefetching, adaptive bit rates, and a much snazzier internet, our video streaming life has gotten way better.

Given this, it’s no shocker that embedding videos on websites has become the new normal. Some folks even jazz it up by making videos the whole backdrop of a site.

WordPress + Videos: Let’s Talk Numbers

No beating around the bush here; let’s get straight to the juicy bits. We tested a basic WordPress site, slapped on some random content, and took it for a spin.

Our test result?

A solid 100 for mobile and desktop. High fives all around!

But here’s the kicker. We popped a YouTube video on the homepage and ran the test again.

Yikes! Just with that one video, we dropped down to 65. That’s a 35% nosedive. More videos? More problems.


So, How Do We Fix This?

Ditching the videos might seem tempting, especially if you’re after that speed boost. But we’re not about to let videos ruin our fun. Here are three pretty awesome ways to keep the videos and speed things up:


1. Switch to YouTube No-Cookie

Standard YouTube embeds bring along a ton of baggage: scripts, cookies, you name it. But there’s a less needy version – youtube-nocookie.com. Swap “youtube.com” for “youtube-nocookie.com” in your embed URL, and you’ll have a lighter, zippier page in no time. While this approach will not increase your pagespeed score much, it will reduce the number of network requests on your site and help other optimization efforts. This is the quickest option that provides a small win.


2. LazyLoading For the Win

Dive into the embed code and sneak in the ‘loading=”lazy”‘ tag. This tells the browser, “Hey, chill! Load the video only when it’s in view.” By adding this, you instruct the web browser to only load the video once it comes in view. This helps minimize network requests and the amount of work the browser has to do initially to display your page. This approach only works for videos that are not visible on the first fold of the website. For videos that are above the fold, we need a different approach.


3. Facades: Fancy Name, Cool Trick

For those videos that just HAVE to be front and center, facades are the way to go. Start with a static image, slap on a play button, and when clicked boom! The real video pops up. Facade is a technique that essentially loads fake elements initially and replaces them with the real thing when needed. For youtube, you can replace the video with a static image that includes the video thumbnail and a play icon. When a user clicks on the play icon, this image launches a popup with the actual video in it.

In the example above, you get to dodge the YouTube overhead and still wow visitors with your vids.

By doing so, you avoid the burden youtube puts on the browser until it’s necessary, and still use the persuation power of videos.

 

If lightboxes are not your thing, you can look into a plugin called lazy-load-for-videos. It replaces video embeds on your site with static images. When this image is clicked, it replaces it with the actual video in the same location.
 
Alright, let’s wrap this up. We all love a good video, right? But no one’s got time for a slow site. Lucky for us, with a few tweaks here and there, we can have our cake and eat it too! So, dive into these tips, grab those 35 extra PageSpeed points, and let’s give our visitors the fast, video-filled experience they’re after. Go ahead and level up your WordPress game!

Want faster WordPress?

WordPress Speed Optimization

Try our AWS powered WordPress hosting for free and see the difference for yourself.

No Credit Card Required.

Whitelabel Web Hosting Portal Demo

Launching WordPress on AWS takes just one minute with Nestify.

Launching WooCommerce on AWS takes just one minute with Nestify.