TL;DR: To embed videos in WordPress while maintaining site speed, prioritize optimization, and consider external hosting services. Uploading videos directly to your site can slow it down, so using platforms like YouTube or Vimeo is recommended. Use the WordPress block editor to add a video block or embed the video link directly. Additionally, leverage lazy loading for videos, ensuring they only load when visible to the user, enhancing site performance.
In recent years, videos have become the go-to media format for many users. And the stats prove it:
- Video placed on the landing page improves conversion by 86% compared to text pages only. (Wishpond)
- 62% of consumers watch product review videos before making a purchase. (Business2Community)
- 80% of customers start the “customer journey” by watching branded videos on YouTube. (Smart Insights)
But while these numbers are spectacular, you need to know something about videos:
They can negatively impact your web performance.
So when adding one to your page, you must strike the right balance between size, quality, and speed.
In the following lines, you will learn all about the best ways to embed videos into your WordPress site.
Let’s get started!
Does embedding videos slow down your website?
Due to their larger size, videos can increase page weight and slow down load times.
There is no secret that images are the biggest contributors to page weight on the internet. But when it comes to size per request, according to the Web Almanac:
“...the biggest contributors in sheer size per request are video, audio, and fonts. At the 90th percentile, video requests weigh in at 2,158 KB, four times larger than all the other 90th percentile types combined.”
Source: Web Alamanc 2022
To illustrate a video's impact on web performance, let’s run some tests on our Agency page that displays a video above the fold.
First, to set some benchmarks, we’ll test it with all NitroPack optimizations enabled.
Here are the results from the three most popular web performance testing tools:
- PageSpeed Insights (with NitroPack)
- GTmetrix (with NitroPack)
Now let’s see what our results look like with no performance optimizations applied:
- PageSpeed Insights (without NitroPack)
Firstly, we see a drastic drop in the overall Performance Score:
And secondly, most of the warnings recommend optimizing our video:
Reduce unused JavaScript
Reduce unused CSS
Reduce the impact of third-party code
Some third-party resources can be lazy loaded with a facade
Avoid enormous network payloads
- GTmetrix (without NitroPack)
Our grade went from A to B, and our Performance Score plummeted to 85%:
- Pingdom (without NitroPack)
The difference in results speaks for itself:
94 → 64
434.7 KB → 3.3 MB
748ms → 2.55s
46 requests → 125 requests
Important: While we cannot entirely attribute the decrease in results to one unoptimized video, its massive impact on performance is more than obvious.
So adding a video to your WordPress site might seem like a double-edged sword.
But it doesn’t have to be.
In fact, knowing all downsides before taking action allows you to find the best ways to minimize them more effectively.
Read on to learn how.
What is the best way to host a video on WordPress?
Embedding is the best way to add videos to your WordPress website. This involves uploading your videos to a third-party service such as YouTube or Vimeo and then using the URL or code provided to embed it to your page. By doing so, you can utilize the server resources of YouTube or Vimeo instead of your own.
That’s the short answer.
Let’s zone in on each option and unfold why:
- Uploading (self-hosting) videos isn’t recommended
- Embedding is the go-to alternative
Why you should never host your own videos
When you upload/host a video, you store the video files on your website and server.
Even if your hosting plan offers a large amount of monthly bandwidth, having large files often downloaded by lots of people will cause unnecessary waste of resources.
And we’re just scratching the surface.
Here are several other reasons why you should avoid uploading videos to WordPress:
1. Increased bandwidth usage
Although we’ve partly mentioned this drawback, it’s essential to understand how uploading a video file can negatively impact your hosting bills and performance.
Bandwidth refers to the amount of data that can be transferred to and from your hosting account within a given period. Let’s say that your landing page has 50KB of resources. Whenever a visitor lands on it, they have to download 50KB from your website, which in turn, consumes 50KB of your bandwidth allocation.
Hence, the larger the files on your web page are, the more hosting resources you will need.
On top of that, if a single large video file receives too many requests, it may exceed the limits of your web hosting server, and your website could be temporarily suspended until the issue is resolved.
2. Slow loading and bad user experience
It is a common misconception that the server alone bears the burden of hosting large video files and any resulting damage. Unfortunately, this is not always the case.
Uploading videos directly to your WordPress site can often cause streaming delays, resulting in dissatisfied viewers, a bad user experience, and tons of rage clicks.
On top of that, how fast your video loads depends on your visitors’ internet connection and how close they are to the server where the video is hosted.
3. Different browsers, different file formats
Due to the current HTML5 specification, no standard video formats are used by all browsers.
For example, while Safari supports H.264 (MP4) videos, it does not support WebM or Ogg. On the other hand, Firefox supports Ogg or WebM videos but not H.264. Chrome, fortunately, can play all the major video formats.
However, if you want to ensure your video can be played on all major browsers, you will need to convert your video into multiple formats, such as .mp4, .ogv, and .webm.
This means you will have three separate video files to upload, each potentially being hundreds of megabytes.
No bueno!
4. Varying quality across browsers
If uploading three different video files doesn’t sound like much, there is more.
You’ll probably need video converter tools to convert your videos into the required formats.
The problem?
Every application handles the conversion process in a slightly different way.
Hence, your video quality may vary depending on its format.
To make things worse, each web browser has its own way of handling video playback. Consequently, the same video file can appear great in one browser but terrible in another. So you could spend hours experimenting until you find the perfect match.
These are just a few hurdles you will face if you decide to host your videos.
Alternatively, you can skip all the headaches and go with the easier option – embedding your videos.
Why embedding is the best way to host a video on WordPress
Knowing the drawbacks of self-hosting a video, we’re sure you can guess why embedding is the recommended route. But still, let’s go through some of the benefits:
- Save bandwidth. Using a third-party service to host your videos means you will save your server resources.
- Save disk space. You can add videos of any size without worrying about how much of your disk space they will take. You can use your hosting space for website files and emails.
- No need to convert your video into different formats. You can play embedded videos on any web browser and operating system, regardless of the format you have used to upload the video to the third-party platform.
- Extra traffic and visibility. Publishing your video on Youtube, for instance, means that users can stumble across it by browsing the platform. In turn, that could lead to extra traffic to your website. Get some of the best YouTube video ideas to help you achieve this.
- Better quality. Taking the file conversion out of the equation, you will be able to display videos of the highest quality.
- Responsive design. Video-sharing platforms ensure that the embedded video is displayed in the most appropriate size for that specific page, thanks to their full responsiveness.
Here’s what an embedded video will look like on your page:
In a nutshell:
You get all of YouTube’s features and provide users with a familiar experience without overloading your servers with unnecessary requests.
How to embed a video in WordPress
It's super easy.
Choose one of the following three methods to embed a video in a minute:
1. Paste your video’s URL into your page/post
We know that it sounds too good to be true, but yes - all you need to do is paste your video’s URL where you want it to appear on your page.
Then, WordPress will recognize it and embed it for you automatically.
2. Use the iFrame method
Go to your YouTube video and click on Share.
Then, instead of copying your URL, click on Embed.
Copy the iFrame:
Return to the WordPress editor, change from visual to text mode, and paste the embed code:
That’s it.
3. Insert video block
WordPress has a built-in option for embedding videos using blocks. Simply add a new block and search for “video”:
Select your third-party platform and paste the URL address of your video. Your video should appear on your page.
Since you know the essentials of uploading a video on WordPress, let’s see how you can optimize your video content for optimal web performance, shall we?
How do I optimize videos in WordPress? [5 Performance Tips]
Whether you host or embed a video from a third-party platform, adding a video file will inevitably impact your page’s load time.
But to be honest - every file somehow affects the speed of a web page.
The good news?
You can optimize your site resources for better performance.
When it comes to optimizing videos, the following best practices will help:
1. Lazy load non-critical resources
Users want to see content being painted quickly and experience a website that becomes interactive immediately.
That being said, not all resources are critical for providing the best user experience right from the start.
If your video comes later in the page, there’s no need to load it immediately because:
- It slows down the rendering process.
- Users may not even scroll down to see it.
- It negatively impacts the whole user experience.
Make sure to lazy load all non-critical resources. You can use the defer and async attributes.
By using the async and defer attributes, the browser can load render-blocking scripts in the background while parsing the HTML. This enables the browser to construct the DOM and render the page without being blocked by script downloads.
As a result, you will see an improvement in the following metrics:
2. Avoid looping autoplaying videos
Although auto-playing videos are still popular, especially as homepage backgrounds, they can create various site-speed problems if not implemented correctly.
As cool as they might look, they will dramatically increase your Largest Contentful Paint (LCP) score.
Requiring a browser to play a video while simultaneously loading essential elements, such as HTML, images, and JavaScript, can overload the browser and cause it to perform sluggishly.
If you still want to try it, keep the video as short as possible and export the files without audio.
That’s what Weglot did:
And their performance stats are more than good:
3. Use a Content Delivery Network (CDN)
A Content Delivery Network (CDN) consists of many geographically distributed servers worldwide. Its main job is to shorten the physical distance between a user and the web server, resulting in faster load times.
Apart from boosting your site’s overall performance, a CDN will improve the responsiveness and seamlessness of your streamed videos, no matter where your users visit from.
4. Preload your videos
Preloading your videos can give your site an extra performance boost.
You can either use the video preload attribute or link rel=preload.
Use the video preload attribute to provide a hint to the browser as to how much information or content to preload:
However, the browser may completely ignore the video preload attribute because it's just a hint.
If you want to force your will, then use link rel=preload.
Link rel=preload is a declarative fetch that forces the browser to fetch the resource you know is crucial to the page experience.
When using rel=preload, adding an “as” value is essential. The “as” value tells browsers what priority to give the resource you’re preloading without delaying more important files or falling behind less important ones.
5. Use a Page Speed Optimization Plugin
Should I self-host or embed? Should I upgrade my hosting resources or not? Which platform should I use if I decide to embed?
Once you decide which way you want to go, it's time for the next important step – what's the best way to optimize my videos automatically?
Consider trying NitroPack – the all-in-one performance optimization solution that speeds up your WordPress site without compromising your design and video quality.
Thanks to a set of powerful features like:
- Video lazy loading
- Prioritization of critical resources over non-critical
- JavaScript lazy loading
- Critical CSS
- Built-in CDN
- And more…
You can embed Youtube videos risk-free and engage your site visitors from the get-go.
Don’t Forget to Test
Regardless of the uploading method you decide to use, don’t forget that:
Adding a video to your website shouldn’t be at the expense of your site’s performance.
Yes, users prefer to consume video content, but if your page is slow, they might not even see it.
That’s why running tests before and after uploading/embedding a video is crucial.
To strike the right balance between size, quality, and speed, you can use the well-known testing tools
Embed video in WordPress FAQ
Why won’t my YouTube video embed on WordPress?
When you create a WordPress site, you have the option to allow or forbid embeds. Make sure you’ve allowed them. To do that, go to Settings >> Media, and under Embeds, check the option “When possible, embed the media content from a URL directly onto the page”.
Why is there an error when I upload a video to WordPress?
There are two possibilities - it’s either a client-side error related to an unstable network connection or a hosting error related to low server resources.
Why do I keep getting playback errors?
Most probably, too many processes are running at the same time, which causes a playback error.
How to upload videos to WordPress without YouTube?
Keep in mind that hosting videos on your WordPress site can use a lot of server resources and may slow down your site. That being said, ensure that the video you want to upload is in a file format that WordPress supports, such as .mp4, .m4v, .webm, .ogv, .wmv, and .flv. Click the "Add Media" button and n either drag and drop your video file or click "Upload Files" and then "Select Files" to choose your video file from your computer's hard drive. Once the video has been uploaded, it will appear in the "Media Library" tab. In the "Media Library" tab, select the video you've just uploaded. On the right side, you'll see an attachment details panel. Here you can add a caption or description for your video if you wish. When you're ready, click "Insert into post" at the bottom.
