How to embed a video on a website

Paste an iframe pointing at your video host and give it a width of 100% with an aspect-ratio rather than a fixed height, keep loading="lazy", and set an allow list for autoplay, fullscreen and picture-in-picture. Autoplay only works when the video is muted — that is a browser rule. A hosted platform gives you this embed code already correct.

Updated 2026-08-18 · Markdown version

The minimum correct embed

<iframe src="https://videokr.com/e/vid_abc123" title="Product tour"
        style="width:100%;aspect-ratio:16/9;border:0"
        allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
        loading="lazy"></iframe>

Four details do the work:

• width:100% + aspect-ratio — the box is reserved before anything loads, so the page does not jump. Fixed height attributes are the single most common cause of a video embed wrecking Cumulative Layout Shift.
• loading="lazy" — nothing is fetched until the embed nears the viewport.
• allow= — without it, fullscreen and picture-in-picture are blocked inside the iframe.
• title — screen readers announce the frame; an untitled iframe is announced as "iframe".

Or a script loader

<script src="https://videokr.com/embed.js" data-video="vid_abc123" async></script>

The loader writes that iframe for you, keeps it responsive, and — for a playlist — grows the box to fit the queue. Use the plain iframe where your CMS strips scripts.

Autoplay, honestly

Browsers block autoplay with sound. Muted autoplay is allowed and is the right pattern for a hero loop; anything else needs a click. Trying to defeat this produces a player that appears broken on iOS. Set muted alongside autoplay and give the viewer a visible unmute.

Self-hosting the file yourself

You can serve your own file:

<video controls preload="metadata" poster="/poster.webp" style="width:100%;aspect-ratio:16/9">
  <source src="/media/tour.mp4" type="video/mp4">
</video>

That works, and you then own delivery, adaptive quality, thumbnails and measurement — see self-hosted vs hosted video. preload="metadata" rather than auto stops a page with several videos from downloading megabytes nobody asked for.

Placement and framing

• One video per screenful. Two players competing on the same fold halves both.
• Put the video where the question it answers is asked, not at the top because it looks good there.
• Give it a caption line in text. Search engines and skimmers both read it.
• Keep the embed inside your content width; a full-bleed 16:9 video on a phone is a wall.

Checks after you paste it

1. Load the page on a phone: does anything shift as the player appears?
2. Fullscreen and picture-in-picture both work?
3. Sound-off comprehension: are there captions?
4. Does the page still score well? A lazy iframe should cost you almost nothing until it is used.