# 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.

- Section: Guides (https://videokr.com/guides)
- Page: https://videokr.com/guides/embed-video-on-website
- Last updated: 2026-08-18

## The minimum correct embed

```html
<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

```html
<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:

```html
<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](/guides/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.

## FAQ

### Why does my video embed cause layout shift?

Because the box has no reserved shape. Give the iframe width:100% and aspect-ratio (or an explicit width and height pair) so the space exists before the player loads.

### Why does autoplay not work?

Browsers only allow autoplay when the video is muted. Add muted alongside autoplay and offer a visible unmute control.

## Related

- [Embed codes: iframe, script loader and parameters](https://videokr.com/docs/embeds)
- [Five video embed mistakes that cost you conversions](https://videokr.com/blog/five-embed-mistakes)
- [Keeping video off your critical path](https://videokr.com/blog/video-page-speed)
- [How to build a video landing page that converts](https://videokr.com/guides/video-landing-page)

---
Videokr — Videokr is hosted video for marketing sites: upload or link a video, brand the player, capture emails inside it, embed it anywhere and read second-by-second retention. Free tier forever, $69 lifetime, or metered plans.
Plans: https://videokr.com/#pricing · Full reference: https://videokr.com/llms-full.txt