How to Embed a YouTube Video on Your Website

You can add a YouTube video to your website by copying an embed code or link from YouTube and pasting it into your page. The exact steps depend on whether your site runs on WordPress or is a custom-built (plain HTML) site, but in both cases you don't need any special software, just the video's link from YouTube.

Step 1: Get the Embed Code From YouTube

1. Open the video on YouTube.
2. Click the Share button below the video.
3. Click Embed.
4. Copy the code shown in the box. It will look like an <iframe> tag starting with a YouTube web address.

You can also just copy the video's normal web address from the browser's address bar. WordPress can turn a plain link into a video player automatically, but a custom HTML site needs the actual embed code from the Embed tab.

In WordPress

1. Open the page or post in the editor and click where you want the video to appear.
2. Paste the video's YouTube link directly on its own line. The block editor will detect it and turn it into an embedded YouTube block automatically.
3. If it doesn't convert automatically, add a new block, search for YouTube, and paste the link into that block.
4. Click Update or Publish to save the page.

If you're using the Classic Editor instead of the block editor, paste the full <iframe> embed code into the Text (HTML) tab of the editor, not the Visual tab.

On a Custom-Built (Plain HTML) Website

1. Open the page's HTML file or template in your site's editor or file manager.
2. Paste the <iframe> embed code you copied from YouTube's Embed tab at the point in the HTML where you want the video to appear.
3. Save the file and upload it if you edited it locally, then reload the page to confirm the video shows up.

Step 2: Make the Video Resize Properly on Phones

YouTube's embed code has a fixed width and height, which can make the video look too large or get cut off on smaller screens. To make it resize with the page, wrap the iframe in a container and apply this CSS:

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe>
</div>

The padding-bottom:56.25% value keeps the standard 16:9 video shape at any screen width. If your video isn't widescreen, adjust that percentage to match its actual aspect ratio.

A Note on Page Speed

An embedded YouTube video loads extra scripts in the background even before a visitor presses play, which can slow your page down, especially if you have several videos on one page.

• Only embed videos on pages where they add real value, not as decoration.
• If a page has more than one video, consider showing a clickable thumbnail image that loads the actual player only when clicked.
• Use youtube-nocookie.com instead of the standard embed address if you want YouTube to avoid setting tracking cookies until the visitor plays the video. You can swap this in manually by changing youtube.com to youtube-nocookie.com in the embed code's web address.

If your page already feels slow, check How to Speed Up a Slow-Loading Website for other common causes before adding more embedded content.