how do i add a video without making the page heavy

web · 2026-10-03 · 3 min

a video on a website is either an embed from youtube or vimeo, or a file you host yourself. the embed is almost always the right answer: it is free, it adapts to the screen, and someone else pays for the bandwidth. the cost is a third-party script that can make the page slow if you let it load immediately.

the embed

on youtube, use share then embed, and prefer the nocookie domain so nothing is stored until playback. vimeo does the same with a cleaner player and no ads, on a paid plan for the good settings. give the iframe a title, keep the aspect ratio with a wrapper, and do not rely on autoplay with sound, because every browser blocks it and the video simply does not start.

the facade, if speed matters

the trick is to load only a thumbnail and a play button, then swap in the iframe when someone clicks. youtube thumbnails live at a predictable url, so it takes a few lines of javascript and saves most of the weight. on a page where the video is the main content, this is the difference between a fast page and a page that waits for google.

self-hosting, honestly

a file you host yourself means no third-party cookies and full control, and a video file is heavy: a minute of 1080p is tens of megabytes. it only makes sense for a short loop used as a background, muted, compressed, with a poster image, and never on a phone if you can avoid it.

the embed, in detail

use the privacy-enhanced domain: youtube-nocookie.com/embed/ instead of youtube.com/embed/. it postpones cookies until playback, it does not remove them: when someone presses play, youtube sets them anyway. on its own it is not a consent solution.

the weight. an empty iframe costs nothing; the player it loads is hundreds of kilobytes of javascript, plus thumbnails and fonts, and it starts as soon as the iframe enters the viewport. the lazy loading attribute on the iframe only helps for players far down the page. the ones above the fold load immediately.

click to load. keep a poster and a real button, swap in the iframe on click, and add the autoplay parameter to the source so the click is not wasted. that also solves consent: until someone clicks, nothing is requested from youtube, and the click is the consent. write under the button what is about to load.

subtitles. do not count on the automatic captions: fast speech in a regional accent comes out as another language. upload your own track or put the transcript on the page, which is also the part a search engine can read.

the iframe needs a title, an allow attribute with autoplay, encrypted-media and picture-in-picture, and allowfullscreen. width and height, or a wrapper with a fixed ratio.

if you will not load third parties at all, the honest alternative is a poster with a link to the video, not an empty black rectangle.

faq

youtube or vimeo?

youtube for reach and free bandwidth, vimeo for a cleaner player and no suggested videos at the end. if the video is a product demo shown to clients, vimeo looks more like a brand. if it is content meant to be found, youtube is where the search happens.

does a video help seo?

a video on the page keeps people longer and can appear in results on its own. a transcript and a real description do more for the page than the embed alone, because a search engine cannot watch the file.

should the video autoplay?

only muted, as a background, and ideally not at all on a phone with mobile data. autoplay with sound is blocked by browsers, and a video that starts moving while someone reads is a reason to close the tab.

how do i embed a youtube video on my website?

take the embed code from youtube, switch the domain to youtube-nocookie, and wrap the iframe in a container that keeps the 16:9 ratio. give the iframe a title and the allow attributes it needs. if the page has to be fast, or you need cookie consent, show only a poster and load the iframe on click.