How to Embed Video In WordPress And Keep Your Site Fast
Last updated on Mar 14th, 2024 | 12 min
Special Black Friday Offer 
Get NitroPack with up to 37% OFF
Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
In recent years, videos have become the go-to media format for many users. And the stats prove it:
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!
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:
Now let’s see what our results look like with no performance optimizations applied:
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 the impact of third-party code
Some third-party resources can be lazy loaded with a facade
Avoid enormous network payloads
Our grade went from A to B, and our Performance Score plummeted to 85%:
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.
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:
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.
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:
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.
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?
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:
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:
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:
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:
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.
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.
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:
You can embed Youtube videos risk-free and engage your site visitors from the get-go.
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
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”.
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.
Most probably, too many processes are running at the same time, which causes a playback error.
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.
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.