Ijharul Islam
To embed a video on a website, either embed it from a video host or host the file yourself. From YouTube, click Share under the video, then Embed, copy the iframe code and paste it into your page's HTML. In WordPress, paste the YouTube or Vimeo link into an Embed block. To host it yourself, upload an MP4 (H.264, AAC) and add an HTML5 video tag with controls.
More on this topic: Video specs by platform, every guide in one place.
Below are the steps for each, how to make the player responsive, start at a set time or autoplay, and which option loads faster.
The short answer
YouTube: Share > Embed > copy the code > paste it into an HTML block. WordPress: paste the video URL into an Embed (or YouTube/Vimeo) block. Your own file: upload the MP4 and use
<video controls playsinline poster="cover.jpg"><source src="video.mp4" type="video/mp4"></video>. For autoplay, browsers require the video to be muted.
Key takeaways
- Embedding from YouTube or Vimeo saves your bandwidth and handles quality switching.
- Self-hosting gives you full control and no third-party branding, but you pay for the bandwidth and need a small, web-ready MP4.
- Autoplay only works muted in modern browsers.
- YouTube's privacy-enhanced mode uses the youtube-nocookie.com domain.
- Only public and unlisted YouTube videos can be embedded; private ones can't.
How to embed a YouTube video
- On a computer, open the video on YouTube.
- Click Share below the video, then Embed.
- Copy the HTML code from the box.
- Paste it into your website's HTML (in most site builders, an HTML or Code block).
YouTube's help page also lists options you can add to the embed URL:
| Option | How | Note |
|---|---|---|
| Start at a time | ?start=90 (seconds) | Starts at 1:30 |
| Autoplay | autoplay=1 (and mute=1) | YouTube says autoplayed embeds don't count as views |
| Captions on | cc_load_policy=1 | cc_lang_pref=fr sets the language |
| Privacy-enhanced mode | Use youtube-nocookie.com in the URL | Network admins must allow that domain too |
QuickVeed's free YouTube embed code generator builds the code for you: paste a link, set a start or end time, tick autoplay, loop, captions or privacy-enhanced mode, and copy a responsive 16:9 or fixed-size embed.
How to embed a video in WordPress
WordPress's documentation says the block editor can embed content from services such as YouTube, Vimeo, TED and TikTok: add an Embed block (or the YouTube or Vimeo block) and paste the video's URL. You don't upload anything; the block links to the video. WordPress notes that only public and unlisted YouTube videos can be embedded, and that Facebook and Instagram embeds need a developer app and token since 2020.
Other site builders (Squarespace, Wix, Webflow, Shopify) have a video or embed block that takes a URL or code; look for “Video” or “Embed” in the block list.
How to embed your own MP4 with HTML
If you host the file yourself, use the HTML5 video element:
| Use | Code |
|---|---|
| Standard player | <video controls playsinline preload="metadata" poster="cover.jpg"><source src="video.mp4" type="video/mp4"></video> |
| Silent looping background | <video autoplay muted loop playsinline poster="cover.jpg"><source src="bg.mp4" type="video/mp4"></video> |
controlsshows play, volume and seek;posteris the image shown before playback;playsinlinekeeps it in the page on phones.- MDN notes that modern browsers block autoplay with sound, so add
mutedif you useautoplay; also, boolean attributes likeautoplay="false"still switch autoplay on, so remove the attribute instead. preload="metadata"avoids downloading the whole video before someone presses play.
Make the file web-ready: MP4 with H.264 and AAC (see MP4 vs MOV), sized for the page, and with the index at the start (FFmpeg's -movflags +faststart). A background loop should be a few MB at most; the free video compressor shrinks it, and how to compress a video covers desktop tools. For the poster, grab a sharp still with the free frame grabber (see how to get a still image from a video).
Make the embed responsive
A fixed-size iframe (560×315) overflows on phones. Wrap it so it scales:
| Approach | Code |
|---|---|
| Modern CSS | iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } |
| Self-hosted video | video { width: 100%; height: auto; } |
For a vertical Short or Reel, use aspect-ratio: 9 / 16 and cap the width so it doesn't fill a desktop screen.
YouTube embed or self-hosted: which to choose
| YouTube or Vimeo embed | Self-hosted MP4 | |
|---|---|---|
| Bandwidth cost | The host's | Yours |
| Quality switching on slow connections | Automatic | One file unless you set up streaming |
| Branding and suggestions | The host's player and branding | None; your design |
| Page speed | The player loads extra scripts; load on click to help | Light if the file is small and preload is metadata |
| Best for | Long videos, tutorials, anything over a minute | Short loops, hero backgrounds, product clips |
A good thumbnail decides whether people click play: how to make a YouTube thumbnail applies to embedded videos too. For a tiny silent animation, a short muted MP4 is usually smaller than a GIF; see how to convert a video to GIF.
Frequently asked questions
How much video can I embed from a free Vimeo account?
Vimeo's Free plan allows 3 GB of embeddable and non-public videos (public, non-embeddable uploads are unlimited). Paid plans include 2 to 7 TB of total storage. See Vimeo upload limits.
How do I embed a YouTube video on my website?
Click Share under the video, then Embed, copy the code and paste it into an HTML block on your page.
How do I embed a video in WordPress?
Add an Embed (or YouTube/Vimeo) block and paste the video's URL. Only public and unlisted YouTube videos can be embedded.
How do I embed an MP4 on a website?
Upload the MP4 and use the HTML video tag with controls, playsinline and a poster image.
Why won't my embedded video autoplay?
Browsers block autoplay with sound. Add muted (or mute=1 for YouTube) and it will autoplay.
How do I make a YouTube embed start at a certain time?
Add ?start= followed by the seconds to the embed URL, e.g. ?start=90 for 1:30.
Do I need schema markup for an embedded video?
If you want the video to appear in Google's video results, give it its own watch page and add VideoObject structured data (name, thumbnailUrl and uploadDate are required) or a video sitemap. Google doesn't treat a blog post with a supporting embed as a watch page. Video SEO walks through it.
Does embedding a YouTube video slow down my site?
The player adds scripts. Loading it only when the visitor clicks, or using a thumbnail first, keeps pages fast.
Try it with your own video
Add captions to the video before you embed it, so visitors can follow with the sound off. Upload the video, pick a caption style, and judge the result for yourself. QuickVeed plans start at $18/month, and new accounts get a 14-day trial with 250 credits, no card needed. Sign up or see pricing.
Sources
Competitor details in this post were checked against these public pages in October 2026. Products and prices change, so confirm with each vendor before you decide.
