Quick answer

Step 1: Copy the embed code from YouTube

1. Open the video on youtube.com.
2. Click Share under the video, then Embed.
3. Optional: tick Start at to begin at a certain time, and Enable privacy-enhanced mode (it switches the address to youtube-nocookie.com, so YouTube doesn’t set tracking cookies until the visitor presses play).
4. Click Copy and paste the code into your HTML where the video should appear.

The code is an <iframe>: a window that shows another web page, here YouTube’s player, inside yours. This is what it looks like on a page:

Embedded example: “HTML Tutorial for Beginners: HTML Crash Course” by Programming with Mosh.

What each part of the embed code does

• src: the player address. It ends with the video’s ID, the part after v= in a normal YouTube link (youtube.com/watch?v=qz0aGYrrlhU). A normal watch link doesn’t work in an iframe; it has to be the /embed/ address.
• title: describes the video for screen readers. YouTube fills in a generic one; replace it with the video’s name.
• allow: which browser features the player may use (autoplay, fullscreen, picture-in-picture…).
• allowfullscreen: lets visitors switch the video to full screen.
• referrerpolicy: keep it. YouTube uses it to check where the video is embedded, and some videos refuse to play without it.
• loading="lazy": not in YouTube’s code, but worth adding. The player then only loads when the visitor scrolls near it, which makes the page faster.

Note: YouTube players don’t run inside this site’s live previews, because the previews are locked down for safety and YouTube’s player needs more permissions. The examples below use a normal video file to practise the layout; on a real page, the YouTube code works the same way.

Step 2: Make the video responsive

YouTube’s code has a fixed width="560" height="315", which is too wide for small phones and small on big screens. Modern CSS makes any video box fill the available width and keep its shape:

1. Delete the width and height attributes (or leave them; the CSS below overrides them).
2. Give the iframe width: 100%; aspect-ratio: 16 / 9;. The browser works out the height from the width.
3. To stop it getting huge on wide screens, put it in a wrapper with a max-width, such as 800px.

The example uses a regular video in a 16:9 box. Open it in the full editor and switch between Desktop and Mobile: the video resizes with the screen and keeps its shape.

Older tutorials use the “padding-bottom: 56.25%” trick with an absolutely positioned iframe. It still works, but aspect-ratio does the same in one line and is supported by every current browser.

Step 3: Start time, autoplay, loop and other options

Options are added to the end of the src address after a ?, separated by &:

For example: src="https://www.youtube-nocookie.com/embed/qz0aGYrrlhU?start=90&cc_load_policy=1".

Step 4: Add your own video file with <video>

If the video is your own file rather than a YouTube video, use the HTML <video> element. There’s no YouTube logo, no suggested videos and no third-party player, but the file comes from your own server, so keep it short and compressed (MP4 with H.264 plays everywhere).

• controls: shows play, pause, volume and fullscreen buttons.
• poster: an image shown before the video starts.
• muted autoplay loop playsinline: the combination for a silent background video; playsinline stops iPhones from opening it full screen.
• <source> tags: offer several formats; the browser plays the first one it supports.
• <track>: adds captions from a .vtt file.

YouTube embed vs your own <video>

Keep video pages fast

Every YouTube player loads around a megabyte of scripts, even if nobody presses play. With one video that’s fine; with several on a page it adds up. Add loading="lazy" to every embed below the top of the page. For pages with many videos, a common technique is a “facade”: show the video’s thumbnail image (https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg) with a play button, and only swap in the real iframe when it’s clicked.

Common mistakes when embedding videos

• Pasting the normal watch link into an iframe. youtube.com/watch?v=… is refused inside iframes. Use the /embed/VIDEO_ID address from the Share → Embed box.
• A video that refuses to play. Some owners turn off embedding, and removing referrerpolicy can also block playback. Try another video, and keep YouTube’s attributes.
• Autoplay that doesn’t start. Browsers block autoplay with sound. Add mute=1.
• Fixed 560 × 315 size. It overflows small phones. Use width: 100% with aspect-ratio.
• A generic title. Replace “YouTube video player” with the real video name for screen reader users.
• Huge self-hosted files. Compress your own videos, or host long ones on YouTube or Vimeo.

Related HTML tags

Frequently asked questions