Generator Tools

HTML5 Video Embed Generator

Build a self-hosted HTML5 video embed with multiple sources, poster, captions, autoplay, loop, and responsive aspect ratio. Copy HTML or JSX.

Video options

Add one or more video files and tune the player attributes. The HTML, JSX, and preview update instantly in your browser.

Sources (1)

Browsers play the first source they support. List MP4 last as the universal fallback, or list it first if you want it preferred.

Source 1

FormatCodecs (optional)

Poster image URL (optional)

Displayed before the user clicks play. Improves perceived load speed and Largest Contentful Paint.

Player attributes

ControlsShows the browser's built-in play, pause, volume, and timeline controls.AutoplayStart playing as soon as the page loads. Browsers block autoplay unless the video is muted.MutedMute the audio by default. Required for autoplay to actually start.LoopRestart the video automatically when it ends.Plays inline (iOS)Allow inline playback on iPhone Safari instead of going full-screen.Disable picture-in-pictureHide the PiP button in supported browsers.Disable remote playbackBlock AirPlay and other remote casting controls.

Preload

CORS (crossorigin)

Sizing

Responsive wraps the video in a CSS aspect-ratio container so it scales with its column. Fixed sets width and height directly on the video element.

Aspect ratio

16:9 (widescreen)

Rounded corners (12px)

Captions / subtitles (track)

Add a WebVTT (.vtt) file with subtitles or captions for accessibility.

Enable track

Responsive HTML (recommended)

Drop this into a blog post, CMS body, or any column where the player should scale with its container.

<div style="width: 100%; aspect-ratio: 16/9;">
  <video controls playsinline preload="metadata" poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" style="width: 100%; height: 100%; object-fit: contain; display: block;">
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    Sorry, your browser does not support embedded videos.
  </video>
</div>

Plain HTML (no wrapper)

Same configuration without the aspect-ratio wrapper if you prefer to size the video with your own CSS.

<video controls playsinline preload="metadata" poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="640" height="360">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Sorry, your browser does not support embedded videos.
</video>

React / JSX

camelCased props ready to paste into a Next.js, Remix, Vite, or CRA component.

<div style={{ width: "100%", aspectRatio: "16 / 9" }}>
  <video
    controls
    playsInline
    preload="metadata"
    poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
    style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }}
  >
      <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
      Sorry, your browser does not support embedded videos.
  </video>
</div>

How to use

Paste a video file URL into Source 1 and pick the format. Add more sources for browser-specific fallbacks; the browser plays the first one it supports.
Optionally add a poster image URL so a still frame appears before playback. Add a WebVTT (.vtt) track for captions or subtitles for accessibility.
Toggle the player attributes you need: Controls, Autoplay, Muted (required for Autoplay), Loop, Plays inline, Preload mode, and CORS.
Choose Responsive wrapper (recommended for blog posts and CMS bodies) or Fixed pixels, then pick an aspect ratio or set width and height.
Copy the Responsive HTML, the plain HTML, or the React or JSX snippet straight into your page or component.
Click Show live preview to play the actual file with your settings so codec, CORS, or autoplay issues surface before you ship.

About this tool

HTML5 Video Embed Generator builds a complete, copy-ready <video> tag for self-hosted video files. Add one or more source URLs in MP4, WebM, Ogg, MOV, or Matroska format and the tool emits the correct type and codecs attribute for each. Configure every common player attribute: controls, autoplay (with an explicit reminder that browsers block autoplay unless muted is also on), muted, loop, playsinline for inline iPhone Safari playback, preload (auto, metadata, or none), crossorigin for CORS-fetched files used in canvas or DRM, and disable-picture-in-picture and disable-remote-playback for locked-down players. Add a poster image to improve perceived load time. Add a WebVTT track for captions, subtitles, descriptions, chapters, or metadata, with a language code, label, and default flag. Choose between a fixed-pixel embed and a responsive wrapper that uses CSS aspect-ratio (16:9, 4:3, 21:9, 1:1, 9:16) so the video scales with its column. The tool outputs three snippets: a responsive HTML version, a plain HTML version, and a React or JSX version with camelCased props and inline style objects ready to paste into a Next.js, Remix, Vite, or CRA component. Click Show live preview at any time to render the actual video with your settings; the preview surfaces codec and CORS issues immediately so you can fix them before shipping. Every URL is validated, common mistakes (missing MP4 fallback, autoplay without muted, empty caption language) trigger inline warnings, and nothing the user types is uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

HTML5 Video Embed Generator

How to use

About this tool

You may also like

YouTube Embed Generator

HTML Iframe Generator

HTML srcset Generator

HTML Boilerplate Generator

SRT and VTT Subtitle Converter

Video Bitrate Calculator

HTML5 Video Embed Generator