Video Embed Code Generator

Get a free embed code for a video hosted anywhere: an MP4 file, Google Drive, Dropbox, Loom or Wistia. Paste the link and copy clean, responsive HTML. No sign-up needed.
A link to an MP4 file, or a Google Drive, Dropbox, Loom or Wistia link, e.g. https://example.com/video.mp4
Want the whole video library as a gallery that updates itself?
The picture shown before the video plays (optional). For video files and Dropbox links — Google Drive, Loom and Wistia show their own cover.
Corner radius

Embed the video

<div style="position:relative;border-radius:24px;overflow:hidden;width:100%;aspect-ratio:16 / 9;">
  <video style="position:absolute;inset:0;width:100%;height:100%;border:0;" controls playsinline preload="metadata">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Created with <a href="https://elfsight.com/tools/video-embed-code-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Click Copy code above to copy it.
  2. Open the page’s HTML file or template.
  3. Paste the code inside <body>, where the content should appear.
  4. Save and upload the page, then open it in a browser to check.

Need more than one video?

Show the whole video library as an interactive gallery that updates itself.

See Video Gallery for HTML →

Before you go

Need more than one video? Show the whole video library as an interactive gallery that updates itself.

Build a video gallery →
Or share this free tool:
Elfsight Video Gallery

Have more than one video?

Video Gallery shows videos from anywhere — your own hosting, Drive, Dropbox, YouTube or Vimeo — in one gallery, grid or carousel.

  • Auto-updates when you publish new videos

  • Carousel, grid, masonry or player with playlist

  • YouTube, Vimeo, TikTok, Instagram, Twitch and any video link

  • No coding — works on any website

Create Widget for Free
No credit card needed
Build a video gallery

The host’s share link vs. this generator

A share link opens the video on the host’s own page. To play it on your site, the link has to become a player address or a <video> tag.
Feature
The host’s share link
This generator
MP4 or WebM file
Opens the file in a separate browser tab
An HTML5 <video> tag that plays on your page
Google Drive
A link to Drive’s file page
An iframe with Drive’s /preview player
Dropbox
dl=0 opens Dropbox’s preview page
raw=1 in a <video> tag, so the file plays in place
Loom
A link to the Loom page
An iframe with the loom.com/embed/… player
Wistia
A link to the media page
An iframe with the fast.wistia.net/embed/iframe/… player
Player settings
None — it’s just a link
Responsive size, controls, muted autoplay, loop and a poster image for files

MP4 or WebM file

The host’s share link

Opens the file in a separate browser tab

This generator

An HTML5 <video> tag that plays on your page

Google Drive

The host’s share link

A link to Drive’s file page

This generator

An iframe with Drive’s /preview player

Dropbox

The host’s share link

dl=0 opens Dropbox’s preview page

This generator

raw=1 in a <video> tag, so the file plays in place

Loom

The host’s share link

A link to the Loom page

This generator

An iframe with the loom.com/embed/… player

Wistia

The host’s share link

A link to the media page

This generator

An iframe with the fast.wistia.net/embed/iframe/… player

Player settings

The host’s share link

None — it’s just a link

This generator

Responsive size, controls, muted autoplay, loop and a poster image for files

How to use the Video Embed Code generator

  1. Paste a link

    Use a direct .mp4 or .webm link, or a Google Drive, Dropbox, Loom or Wistia share link.

  2. Pick options

    Choose controls, autoplay, loop and an optional poster image.

  3. Copy the code

    Paste the HTML into an embed block. The generator uses the right format for each source.

HTML5 video attributes and link formats

Parameter
What it does
Example
src
The video file’s address. You can use <source> elements inside the tag instead.
src="/video/intro.mp4"
<source type>
Lists several versions of the video; the browser plays the first one it supports.
<source src="intro.webm" type="video/webm">
controls
Shows the browser’s play, volume, seek and full-screen controls.
controls
autoplay
Starts playback as soon as possible. Browsers block it for videos with sound, so pair it with muted. autoplay="false" doesn’t turn it off — remove the attribute.
autoplay muted playsinline
muted
Starts the video with the sound off.
muted
playsinline
Plays the video inside the page instead of full screen. Safari needs it for autoplay.
playsinline
loop
Jumps back to the start when the video ends.
loop
poster
Image shown before playback. Without it, nothing shows until the first frame loads.
poster="/img/cover.jpg"
preload
A hint for how much to load in advance: none, metadata (length and size only) or auto. The default differs between browsers.
preload="metadata"
controlslist
Hides some built-in controls where supported: nodownload, nofullscreen, noremoteplayback.
controlslist="nodownload"
<track>
Adds captions or subtitles from a WebVTT (.vtt) file.
<track kind="captions" src="captions.vtt" default>
Dropbox raw=1
Makes a Dropbox shared link return the file itself instead of the preview page.
…/intro.mp4?raw=1
Google Drive /preview
Drive’s embeddable player for a shared file.
drive.google.com/file/d/ID/preview
Loom /embed/
Loom’s embeddable player.
www.loom.com/embed/ID
Wistia iframe
Wistia’s iframe player for a media ID.
fast.wistia.net/embed/iframe/ID

src

What it does

The video file’s address. You can use <source> elements inside the tag instead.

Example

src="/video/intro.mp4"

<source type>

What it does

Lists several versions of the video; the browser plays the first one it supports.

Example

<source src="intro.webm" type="video/webm">

controls

What it does

Shows the browser’s play, volume, seek and full-screen controls.

Example

controls

autoplay

What it does

Starts playback as soon as possible. Browsers block it for videos with sound, so pair it with muted. autoplay="false" doesn’t turn it off — remove the attribute.

Example

autoplay muted playsinline

muted

What it does

Starts the video with the sound off.

Example

muted

playsinline

What it does

Plays the video inside the page instead of full screen. Safari needs it for autoplay.

Example

playsinline

loop

What it does

Jumps back to the start when the video ends.

Example

loop

poster

What it does

Image shown before playback. Without it, nothing shows until the first frame loads.

Example

poster="/img/cover.jpg"

preload

What it does

A hint for how much to load in advance: none, metadata (length and size only) or auto. The default differs between browsers.

Example

preload="metadata"

controlslist

What it does

Hides some built-in controls where supported: nodownload, nofullscreen, noremoteplayback.

Example

controlslist="nodownload"

<track>

What it does

Adds captions or subtitles from a WebVTT (.vtt) file.

Example

<track kind="captions" src="captions.vtt" default>

Dropbox raw=1

What it does

Makes a Dropbox shared link return the file itself instead of the preview page.

Example

…/intro.mp4?raw=1

Google Drive /preview

What it does

Drive’s embeddable player for a shared file.

Example

drive.google.com/file/d/ID/preview

Loom /embed/

What it does

Loom’s embeddable player.

Example

www.loom.com/embed/ID

Wistia iframe

What it does

Wistia’s iframe player for a media ID.

Example

fast.wistia.net/embed/iframe/ID

Source: MDN: The Video Embed element

Embedded video not playing? Common fixes

An MP4 plays in some browsers but not others

The file is probably HEVC (H.265) — iPhones set to High Efficiency record in this format, and browser support for it depends on the device. Export it again as MP4 with H.264 video and AAC audio.

A Dropbox link downloads the file instead of playing it

Replace dl=0 or dl=1 in the link with raw=1. The generator does this for you.

Google Drive asks visitors for access

Change the file’s sharing to “Anyone with the link”. Google also notes that visitors who aren’t signed in may hit a playback limit, and that Drive video needs third-party cookies, so some browsers won’t play it.

Google Drive says the video is still processing

Drive needs time to prepare a new upload for playback, longer for big files. Wait and reload the page.

A Loom video asks viewers to sign in

In Loom, set the video’s privacy to “anyone with the link can view”, then copy the link again.

Autoplay doesn’t start

Browsers only allow autoplay when the video is muted. Keep muted and playsinline next to autoplay — Safari needs playsinline for autoplay.

A black box shows before the video plays

Add a poster image. Without one, the browser shows nothing until the first frame has loaded.

Where your video is hosted, and which link to paste

The generator works out the right code from the link. The link has to be the right one, and the video has to be visible to anyone who opens it.

Where the video is
Link to paste
Before you copy it
Your own site or storage (MP4, WebM file)
The direct file link, ending in .mp4 or .webm
Open the link in a browser: it should play the file itself, not show a page around it.
Google Drive
The file’s share link (…/file/d/ID/view). The generator changes /view to /preview, Drive’s embeddable player.
Set sharing to “Anyone with the link”. A freshly uploaded video may still be processing.
Dropbox
The shared link. The generator changes dl=0 to raw=1, so the file plays instead of opening the Dropbox preview page.
Copy the shared link to the video file, not to a folder.
Loom
The video’s share link. The generator turns it into the loom.com/embed/… player.
Set privacy to “anyone with the link can view”.
Wistia
The media page link. The ID at the end goes into fast.wistia.net/embed/iframe/ID.
Use the link from the video’s own page, not from a project or folder.
YouTube or Vimeo
Use the YouTube or Vimeo embed generator instead — they set the player options those sites support.
—

Your own site or storage (MP4, WebM file)

Link to paste

The direct file link, ending in .mp4 or .webm

Before you copy it

Open the link in a browser: it should play the file itself, not show a page around it.

Google Drive

Link to paste

The file’s share link (…/file/d/ID/view). The generator changes /view to /preview, Drive’s embeddable player.

Before you copy it

Set sharing to “Anyone with the link”. A freshly uploaded video may still be processing.

Dropbox

Link to paste

The shared link. The generator changes dl=0 to raw=1, so the file plays instead of opening the Dropbox preview page.

Before you copy it

Copy the shared link to the video file, not to a folder.

Loom

Link to paste

The video’s share link. The generator turns it into the loom.com/embed/… player.

Before you copy it

Set privacy to “anyone with the link can view”.

Wistia

Link to paste

The media page link. The ID at the end goes into fast.wistia.net/embed/iframe/ID.

Before you copy it

Use the link from the video’s own page, not from a project or folder.

YouTube or Vimeo

Link to paste

Use the YouTube or Vimeo embed generator instead — they set the player options those sites support.

Before you copy it

—

Choosing a format and compressing video for a website

  • MP4 with H.264 video and AAC audio plays in every major browser. If you upload only one file, make it this one.

  • WebM (AV1 or VP9 video with Opus audio) is an open, royalty-free format. Add it as an extra <source> above the MP4 — browsers that can’t play it fall back to the MP4. Safari plays AV1 only on newer Apple devices with hardware support.

  • iPhone videos recorded with the High Efficiency setting use HEVC (H.265), often as .mov files. Browser support for HEVC depends on the system and hardware, so convert these to H.264 MP4 before uploading. The iPhone’s Most Compatible camera setting records H.264 instead.

  • Keep the file small. Trim the clip, export at the size it will be shown rather than at full camera resolution, and compress it. Every visitor downloads what they watch, and big files load slowly on mobile.

  • Add a poster image. It’s shown before playback; without it the player stays blank until the first frame loads.

  • Use preload="metadata" so the browser loads only the length and size, not the whole video, until someone presses play.

  • Add captions with a <track> file (WebVTT), so the video works without sound.

More: MDN: web video codecs, MDN: the <video> element.

Embed code vs. Elfsight Video Gallery

Embed code
Video Gallery
Videos per embed
One video (or one playlist)
Unlimited videos in one widget
Stays up to date
Edit the code for every new video
New videos appear automatically
Mix sources
One platform per snippet
YouTube, Vimeo, TikTok, Instagram, Twitch and any video link
Layouts
Single player
Player with Gallery, Carousel, Grid, Masonry, Playlist
Responsive design
Needs a CSS wrapper
Built in
Coding
Copy and paste code for each video
No code — edit visually in the editor
Price
Free
Free plan, no credit card needed

Videos per embed

Embed code

One video (or one playlist)

Video Gallery

Unlimited videos in one widget

Stays up to date

Embed code

Edit the code for every new video

Video Gallery

New videos appear automatically

Mix sources

Embed code

One platform per snippet

Video Gallery

YouTube, Vimeo, TikTok, Instagram, Twitch and any video link

Layouts

Embed code

Single player

Video Gallery

Player with Gallery, Carousel, Grid, Masonry, Playlist

Responsive design

Embed code

Needs a CSS wrapper

Video Gallery

Built in

Coding

Embed code

Copy and paste code for each video

Video Gallery

No code — edit visually in the editor

Price

Embed code

Free

Video Gallery

Free plan, no credit card needed

Frequently asked questions

Official documentation

MDN: The Video Embed element

Attributes of the HTML5 <video> tagdeveloper.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/videoMDN: The Video Embed element

Chrome autoplay policy

Why autoplay needs the video to be muteddeveloper.chrome.com/blog/autoplayChrome autoplay policy

More free tools

Related guides

How to embed a video on a website

Upload the video to YouTube or Vimeo and paste its embed code, use the HTML5 video tag for files you host yourself, or use a video gallery widget when you need several videos. Here’s how each method works and when to use it.How to embed a video on a website

How to optimize & compress video for website

Use MP4 (H.264/AAC), keep resolution at 1080p or less, compress to a sensible bitrate, add a poster image and lazy-load videos below the fold. Stream long videos from YouTube, Vimeo or a video CDN.How to optimize & compress video for website

Best video hosting for website

Use YouTube for free reach, Vimeo for ad-free branded playback, and a video CDN for full control. Self-host only short clips.Best video hosting for website