How to Embed Video on Website Without Slowing It Down (Explained)
Video is one of the formats that delivers the highest return for a business. It explains the product in seconds, increases time on page, and often converts better than text or images.
But the way you add that video to a website page can have the opposite effect and hurt your loading speed, pushing potential sales away.
To prevent that from happening, this article explains how to embed videos the right way.
Why the way you host a video matters more than it seems
Hosting videos is not just a small detail.
The way a video is added to your website impacts both the user experience and your costs. Let’s break it down:
The impact on speed and Core Web Vitals
Google uses Largest Contentful Paint (LCP) to measure the perceived loading speed of a page: the time it takes for the largest visible element to finish loading. Ideally, it should stay under 2.5 seconds.
And what catches many people by surprise is that this "largest element" can be the video itself (web.dev).
To put the weight into perspective, it’s worth comparing:
Median web page: around 2.6 MB on mobile and 2.9 MB on desktop, including everything else (HTTP Archive).30-second video in 1080p: 15 to 20 MB.
The same video in 4K: over 60 MB.
In other words, a short clip can be heavier than the entire website. And when LCP gets worse, rankings drop (page experience has been a search factor since 2021), and conversions drop too.
According to Google, pages that pass Core Web Vitals have visitors who are 24% less likely to abandon the load.
On a sales landing page, that can be the difference between a lead watching the VSL or closing the tab before the video even appears.
Bandwidth, storage, and the hidden cost
The second problem is bandwidth consumption.
When you upload a video directly to your website, it is downloaded from your server on every visit. During a traffic spike, dozens of simultaneous downloads consume bandwidth quickly and can make the page slow for every user.
Depending on your website plan, exceeding the limit can lead to extra charges or even temporary suspension.
That’s why site builders like Framer recommend hosting longer or heavier videos outside the platform (Framer Help Center).
Three reasons to never upload videos directly to your website
In practice, uploading a video directly to your website makes you lose three things at once:
Automatic transcoding: without it, every visitor downloads the same heavy file, regardless of their connection or device.
Adaptive streaming (HLS): without it, the video does not adjust to the viewer’s internet speed, so it freezes, keeps loading, or simply stops playing.
CDN: without a distribution network, the video travels directly from your server to the visitor, whether they are 50 km or 5,000 km away.
A dedicated video hosting platform solves exactly the three points above. It compresses and transcodes the file into multiple resolutions, delivers it through adaptive streaming, and distributes it via CDN. Your website only loads a lightweight player, which pulls the video from somewhere else, without weighing down your server or the page load time.
Video platform options to choose from
You’ve decided not to upload videos to your website. Now, you need to choose the platform to do it.
For institutional websites and landing pages, there are two paths that make the most sense:
YouTube (free)
Video hosting platforms, such as Panda Video
YouTube: the free option
It is the fastest and cheapest way to remove the video weight from your server, and it works well for open or institutional content that does not depend on direct conversion. The limits appear when the goal is to sell:
The player displays YouTube branding, ads, and video suggestions.
Those suggestions can take the visitor away from your website right at the decision moment.
Control over appearance and performance is limited because everything runs inside the YouTube ecosystem.
The data is focused on channel audience, not page optimization.
Video hosting platforms (like Panda Video)
These platforms are designed for businesses where video is one of the main assets. They deliver exactly what YouTube lacks:
Player with no ads or suggestions that take visitors away from the page.
CDN and adaptive streaming dedicated to the player experience.
Analytics by video and by visitor, useful for optimizing a VSL.
Conversion features inside the player, such as CTAs and controlled autoplay.
Ready-to-use embed code to paste into your website.
In short: YouTube works when the video is open content and zero cost matters more than control. A dedicated platform, like Panda Video, is the right choice when the video needs to convert, keep the visitor on the page, and generate data for optimization.
Also read: Panda Video or YouTube: When should you use each one?
How to get the embed code on YouTube
Before pasting the video into your website, you need the embed code.
On YouTube:
Open the video on YouTube and click Share
Click Embed
Copy the
<iframe>code displayed in the box.
Once you have the code, simply take it to your site builder.
How to get the embed code on Panda Video
Panda Video offers 3 sharing options: Public link, Embed, and HLS.
Here, we’ll show you how to get the link to embed on websites
Access the Dashboard and click the Videos tab
Open the desired video (double-click)
In the upper-right corner, click Embed
Under Platform, select Custom (the option for your own website, landing page, or site builder)
Click the copy icon to get the generated code
Panda also offers the Performance Code, which goes inside the website’s <head> tag and anticipates player loading. It follows the same principle as the prebrowsing tags mentioned earlier and helps the video appear faster above the fold.
Tip: If you use Elementor, check out our WordPress plugin
How to embed the video in Elementor
In Elementor, drag the HTML widget to the section where the video should appear. The native Video widget is more limited and does not always support custom embeds from every platform. Paste the embed code inside the HTML widget and update the page. That’s it — the player appears exactly where the widget was positioned.
How to embed the video in Framer
In Framer, add the Embed component, choose code/HTML mode, and paste the iframe provided by the video platform there (some platforms also let you paste the URL directly). Adjust the dimensions to make it responsive, play it in preview, and publish.
How to embed the video in Webflow
In Webflow, use the Embed element (available in the add elements panel), paste the embed code, and save. Publish the website to see the active player on the final page.
Tips to improve video performance on your website
Once you choose the hosting option, there is still room for implementation mistakes. Here is what solves most of the problem, from the basics to the more technical side.
The basics that solve 80% of cases
Lazy loading: the video only loads when the visitor scrolls down to it, not during the initial page load.
Poster image: a lightweight thumbnail replaces the player until the click, preventing the browser from downloading the entire video file unnecessarily.
Correct
preload: usingpreload="none"orpreload="metadata"instead ofpreload="auto"avoids unnecessary early downloads.Avoid heavy autoplay above the fold: autoplay with a heavy video at the top of the page is one of the most common causes of poor LCP. According to HTTP Archive data (web.dev), around 20% of videos on the web still use autoplay, and many of them without a real need.
Adaptive streaming (HLS) and CDN
HLS (HTTP Live Streaming) splits the video into small chunks and delivers, in real time, the quality that matches the viewer’s connection.
Someone on 4G receives a lower resolution, while someone on fiber receives the high-definition version, without either of them noticing the switch. This technology, combined with CDN, is what prevents the most common slow-video scenario: the right person receiving the wrong file for their internet speed.
Prebrowsing tags: dns-prefetch, preconnect, preload, prerender
One final adjustment, more technical but high-impact, is using prebrowsing tags. They tell the browser to connect in advance to the domain that will deliver the video, even before the player loads. This reduces connection latency at the moment the video actually starts playing.
Common mistakes when hosting video on a website
Uploading a heavy file directly to the server: no CDN, no transcoding, no adaptive streaming.
Using 4K when 1080p is already enough: the difference in file size is significant, and most screens do not even take full advantage of the 4K quality gain.
Autoplay with sound: besides hurting performance, it is one of the biggest reasons for immediate page abandonment.
Not using a CDN: this makes video delivery slower for visitors who are far from your server.
Video above the fold without lazy loading: this is the most common recipe for poor LCP right in the first fold of the page.
Conclusion
Adding video to a website without hurting speed starts with one simple decision: do not upload the file directly to your server. Direct upload consumes a lot of bandwidth and storage, hurts your Core Web Vitals score, and reduces your conversion.
From there, the choice depends on what you need.
If the goal is simply to improve performance without spending anything, YouTube already does the job: it is free and removes the video weight from your server.
But if you want better performance, with no ads and no suggestions taking visitors away from your website, plus all the VSL features designed for conversion, Panda Video is the way to go.
It delivers hosting with its own CDN, features like Smart Autoplay, Dummy Progress Bar, and interactive CTAs inside the video itself, all without weighing down the page load.
Start a free trial on Panda Video and experience what it is like to host your videos with performance, security, and a focus on conversion.
Frequently asked questions
Can I host video directly on my website server?
Technically, yes, but it is not recommended. Without CDN, transcoding, and adaptive streaming, the video consumes server bandwidth and tends to make the page slow, especially during traffic spikes.
Does YouTube work for an institutional website or professional landing page?
It works for open content, with no need for conversion or brand protection. For sales landing pages and VSLs, a dedicated platform usually delivers more control, analytics, and no distractions.
What is the best way to add video to a landing page without making it slow?
External hosting with a distraction-free player, lazy loading, and adaptive streaming — combining this with a conversion-focused player.
Can I switch platforms later? How do I migrate embeds?
Yes. Since the video is hosted outside your website, switching platforms usually means simply replacing the embed code on each page. At Panda Video, we offer a free Chrome extension so you can migrate videos smoothly.
How large is a 1080p video vs. a 4K video?
A 30-second video in 1080p, with standard streaming bitrate, is around 15 to 20 MB. The same video in 4K can easily exceed 60 MB, four times more data.
