How to put a video on a landing page without hurting page speed

A product video is usually the heaviest thing on a landing page, and the easiest to get wrong. Here is the setup I use so the video helps conversion without costing page speed.

Host it elsewhere, embed it

Do not serve a large video file from your own server. Upload to YouTube or Vimeo and embed. YouTube helps discovery, Vimeo gives you more control over the player. Either is fine, so pick based on the goal.

Load the player on click

A standard YouTube iframe pulls in a lot of third-party JavaScript before anyone presses play. Show a thumbnail instead and swap in the real player only when someone clicks:

<div class="video" style="aspect-ratio: 16 / 9"> <button class="play" data-id="YOUR_VIDEO_ID" aria-label="Play the product demo"> <img src="demo-thumb.webp" alt="Product demo: creating your first report" width="1280" height="720"> </button> </div>

document.querySelectorAll('.play').forEach((btn) => { btn.addEventListener('click', () => { const iframe = document.createElement('iframe'); iframe.src = `https://www.youtube-nocookie.com/embed/${btn.dataset.id}?autoplay=1`; iframe.allow = 'autoplay; encrypted-media; picture-in-picture'; iframe.allowFullscreen = true; iframe.title = btn.getAttribute('aria-label'); btn.parentElement.replaceChildren(iframe); }); });

If the thumbnail is the biggest element above the fold, do not lazy-load it, or you will slow your Largest Contentful Paint. Below the fold, loading="lazy" is the right call.

Reserve the space

Give the container a fixed aspect ratio, as above. Without it the page jumps when the player loads, which shows up as layout shift. Make the iframe fill the container with width: 100%; height: 100%.

Add captions and a short summary

Captions help people who watch without sound, and a two-line text summary near the video helps both visitors and search engines understand what the page offers.

Describe the video with structured data

VideoObject markup tells search engines what the video is:

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "Product demo: creating your first report", "description": "A 60-second walkthrough of building a first report.", "thumbnailUrl": "https://example.com/demo-thumb.webp", "uploadDate": "2026-11-01", "duration": "PT1M", "embedUrl": "https://www.youtube.com/embed/YOUR_VIDEO_ID" } </script>