tinyvid.dev
Guide · embedding

HTML video embed code

Putting a video on a page is more than a single line of HTML. This guide walks through the three embed patterns you actually need — a standard player, an autoplaying background loop and a lazy-loaded clip — with copy-paste code for each. Or drop a file into TinyVid and it writes all three for you.

01The basics

The HTML video element

The native video element is all you need to embed video in HTML — no library, no iframe, no third-party player. At its simplest it wraps one or more source lines, each pointing at a file and naming its type, and the browser plays the first one it can support.

Give the video an explicit width and height, or a CSS aspect ratio, so the browser reserves the right space and the page does not jump while it loads. Add a poster image for the frame shown before playback, and the controls attribute for a standard player. Everything else — autoplay, looping, lazy-loading — is a variation on those few attributes.

02Patterns

Three ways to embed a video

Almost every video embed on the web is one of these three patterns, and TinyVid ships all three as presets. Each one comes filled in with the right codecs, a fallback source and your video's real dimensions — then you flip autoplay, looping, controls or a poster until the code fits your page.

Standard player

A player with visible controls, a poster and progressive download. This is the default for any video a visitor chooses to watch — a tutorial, a product demo, a talk. List the small modern file first and the H.264 MP4 last so every browser picks a source it can play, and set preload to metadata so the clip only loads when someone presses play.

<video poster="poster.jpg" width="1280" height="720" controls preload="metadata" style="max-width:100%;height:auto">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Background loop

A silent, looping clip that autoplays behind a hero or section. Because browsers only allow autoplay when the video is muted, this pattern combines the muted, autoplay, loop and playsinline attributes and uses object-fit to cover the area. Keep it short and heavily compressed — it downloads for every visitor, so a Hero background preset with no audio is the right source.

<video poster="poster.jpg" autoplay loop muted playsinline style="width:100%;height:100%;object-fit:cover">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Lazy-load

A clip that only downloads when it scrolls into view, keeping it off the critical path. Its address is held in a data attribute and swapped in by a small IntersectionObserver script once the element nears the viewport. This is the friendliest pattern for pages with several videos, where loading them all up front would wreck performance.

<video class="lazy-video" poster="poster.jpg" width="1280" height="720" data-src="video.mp4" loop muted playsinline preload="none" style="max-width:100%;height:auto"></video>
<!-- IntersectionObserver swaps data-src → src on view -->
03Try it

Generate your embed code

Drop a video below. TinyVid converts it to web-ready formats, then hands you the generator: pick a preset, flip the options you need, and copy code that already carries your video's real width and height — so the page reserves the right space and nothing jumps as it loads. Free up to 200 MB, no account.

tinyvid · converter

Drop your video here

or browse files
MP4 · MOV · AVI · MKV · WebM · GIF|Free up to 200 MB
04Best practices

Attributes and best practices

A handful of attributes do most of the work. The poster gives the player a first frame; preload set to metadata — or none for lazy clips — stops the browser pulling video before it is needed; a width and height, or an aspect ratio, prevent layout shift. For autoplay to work the video must be muted, and playsinline stops iOS forcing it fullscreen.

Offer more than one source. A WebM or AV1 file first and an H.264 MP4 last lets modern browsers take the small file while older ones fall back gracefully — the browser picks the first type it can decode. Naming the codecs in each source's type helps it choose without downloading anything.

Do not forget accessibility. Add a track element with captions for spoken content, and never rely on autoplay alone to carry meaning. A muted background loop should be decorative only — anything a visitor needs to hear belongs in a standard player they can control.

Video tag attributes at a glance

Every attribute you are likely to need on a video element, and when it earns its place.

AttributeWhat it does
controlsShows the browser's play, pause, volume and timeline UI. Include it on any video a visitor is meant to operate; leave it off only for decorative background loops.
posterImage shown before playback begins. Without one the player sits blank or blindly grabs the first frame, so a poster is what keeps the slot from looking broken while the video loads.
preloadHow much the browser fetches up front: metadata reads dimensions and duration only, none defers everything until play, auto lets the browser pull the file. Use metadata for most players and none below the fold.
autoplayStarts playback without a click. Browsers only honour it on muted video, so it goes hand in hand with muted — and it belongs on decorative clips, not on content someone should choose to watch.
mutedDrops the audio at playback. Required for autoplay to work at all. For a clip that should never have sound, remove the audio track from the file itself rather than relying on the attribute.
loopRestarts the clip when it ends. Natural for short background loops, irritating on anything with narration.
playsinlineKeeps the video in the page on iOS instead of throwing it into the native fullscreen player. Essential for background loops on iPhone.
width / heightReserve the player's space before the file arrives so the page does not jump as it loads — the difference between a clean layout and a Cumulative Layout Shift penalty. An aspect-ratio in CSS does the same job responsively.
<source>Lets you offer several files: the browser picks the first type it can decode. List the small modern file (WebM or AV1) first and an H.264 MP4 last as the universal fallback.
<track>Attaches captions or subtitles as a WebVTT file. Add it to anything with speech — it is the accessibility baseline, and it makes the content searchable.

An embed is only as fast as the file behind it. Shrink yours first with the compress video for web guide.

05FAQ
01How do I embed a video in HTML?
Use the native video element with one or more source lines and a poster image; the browser plays the first source it supports. You do not need a library or an iframe. TinyVid writes the whole tag for you from your converted file.
02How do I make a video autoplay as a background?
Browsers only allow autoplay when the video has no sound, so mute it and add the autoplay, loop and playsinline attributes. TinyVid's Hero background preset produces a silent, heavily compressed clip made exactly for this, and generates the matching markup.
03Why won't my video autoplay?
The usual reason is that it is not muted — browsers block autoplay for anything with audio. On iPhones a missing playsinline attribute also stops inline playback. A muted background loop with playsinline autoplays across browsers.
04How do I lazy-load a video?
Keep the file out of the initial download by storing its address in a data attribute and setting preload to none, then swap it in with a small IntersectionObserver script when the element scrolls near the viewport. TinyVid's lazy-load snippet includes the pattern.
05Which video format should I embed?
MP4 with H.264 for the widest compatibility, optionally with a smaller WebM or AV1 source listed first. The browser downloads the first type it can play, so a modern file with an MP4 fallback covers everyone.
06Do I need a video hosting service to embed a video?
No — you can self-host the converted file and paste the tag straight into your page. If you would rather not manage storage and bandwidth, TinyVid's hosted plan stores the video on a CDN and hands you a ready embed URL for a flat monthly price.
07How do I embed an MP4 in HTML?
Put the file in a video element and point a source at it with type="video/mp4": that is all an MP4 needs, and it plays in every browser. Add a second source above it — a WebM or AV1 file — and modern browsers take the smaller file while the MP4 stays as the fallback.
08Should I use the video tag or an iframe?
Use the video element when you host the file yourself: you keep control of the player, the poster, the file size and the loading behaviour, and nothing third-party is loaded. An iframe is what platforms like YouTube or Vimeo hand you — quicker to paste, but it pulls in their player and scripts, and the clip lives on their terms. For a background loop or a short product clip, self-hosting a compressed file is smaller and faster.
09How do I make an embedded video responsive?
Give the video a width of 100% and a height of auto, and set an aspect-ratio in CSS matching the clip so the browser reserves the right space at any screen width. Keep the width and height attributes on the tag as well — they tell the browser the proportions before any CSS or file arrives, which is what prevents layout shift.