How to put a YouTube video on your website

Putting a video on your site means pasting a short block of text, called embed code, into the page. The video itself stays on YouTube. Your page just reserves a rectangle and asks YouTube to fill it. Nothing gets uploaded to your site, nothing counts against your hosting, and the video keeps working if you later move your site somewhere else.

The whole job is three steps: get the link, turn it into embed code, paste it in the right place. The third step is the one that differs between website builders, so most of this page is about that.

Step one: copy the link

Any YouTube link works. The one in the address bar while you are watching, the short one the Share button gives you, or a link someone sent you. All of these point at the same video:

• youtube.com/watch?v=aqz-KE-bpKQ
• youtu.be/aqz-KE-bpKQ
• youtube.com/shorts/aqz-KE-bpKQ

You do not need to find the video ID or tidy the link up. Extra bits on the end, like a timestamp or a playlist, are read rather than ignored.

Step two: get the code

You have two options and they are genuinely different.

YouTube's own Share then Embed button gives you a plain iframe. It works, it takes ten seconds, and it is the right answer if you only want the video on the page and do not care how it looks or what it costs. You get YouTube's player, YouTube's colours, YouTube's suggested videos at the end, and about a megabyte of downloading whether or not anybody presses play.

A generator like the one on this site gives you code you can change: your own colours, your own play button, a control bar in your own style, chapters people can click, and a thumbnail that loads instead of the whole player until somebody actually wants to watch. Paste your link into the builder, adjust until it looks right, and press Copy.

Either way, what you end up with is a block of text on your clipboard. That is your embed code. The rest of this page is where it goes.

Step three: where it goes

Every website builder has somewhere to put raw HTML. It is usually called Embed, Custom HTML, or Code. What you must not do is paste embed code into an ordinary text or paragraph area: the editor will treat it as words and you will see the code itself printed on your page.

WordPress

In the block editor, click the plus button where you want the video, search for Custom HTML, and paste into the block. Use the Preview tab on the block to check it before publishing, because the editor shows the raw code rather than the video while you are editing.

There is also an Embed block, and if you paste a bare YouTube link into a paragraph WordPress will often turn it into a video by itself. Both of those use YouTube's default player and ignore any customising you did, so use Custom HTML for generated code.

On the older classic editor, switch from Visual to Textand paste there.

Some hosts and security plugins strip script tags out of posts. If the video appears but a custom control bar does not, that is usually why. The plain thumbnail and player options do not use a script, so they are unaffected.

Squarespace

Add a Code block and paste into it. Make sure the block's type is set to HTML rather than Markdown. Code blocks need a Business plan or above; on a Personal plan, the Embed block accepts a plain YouTube link instead, but only YouTube's own player.

Wix

Add, then Embed Code, then Embed HTML. Paste into the Code panel and choose Code rather than Website Address.

One thing to know about Wix: an embedded HTML block sits in its own frame with a fixed size that you drag on the canvas. It does not resize with the page the way it does elsewhere, so set the box to the shape you want and check it on the mobile view separately.

Webflow

Drag an Embed element onto the page and paste into it. Webflow limits one Embed to 50,000 characters, which is generous but not infinite, so if you are placing the same video many times it is worth moving the style block into Project Settings, under Custom Code, and keeping only the markup in each Embed.

Webflow shows a placeholder in the designer rather than the real video. Use Preview to see it.

Shopify

In the page or blog post editor, click the </> button in the toolbar to show the HTML, and paste there. For a theme section rather than a page, most themes have a Custom Liquid or Custom HTML section you can add in the theme editor.

Ghost

Type /html on a new line to insert an HTMLcard, and paste into it.

Notion

Notion does not accept HTML at all. Paste the plain YouTube link and chooseEmbed video when it asks. You get YouTube's player and no customising, which is a limitation of Notion rather than of the video.

A plain HTML site

Paste it into the page file wherever you want the video to appear, between the <body> tags. If your generated code includes style and script blocks, they are safe to paste as-is: both are written so that repeating them on the same page does nothing harmful.

When it does not work

You can see the code as text on your page. It went into a paragraph rather than an HTML or Embed block. Cut it, add the right kind of block, and paste again.

The space is there but the video is blank. Usually the video's owner has disabled embedding, or the video is private. Open the YouTube link in a private browsing window: if you cannot watch it there, no embed will fix it.

The video is tiny, or it overflows the page. Generated code sizes itself to whatever container it is in, so this is nearly always the container. In most builders the fix is to check the block's width setting rather than the video.

It looks right on a computer and wrong on a phone. Worth checking before you publish rather than after. The builder has a mobile toggle above the preview for that, and there is more on it inresponsive video embeds.

Other video platforms

All of the above works the same way for Vimeo, Loom, Wistia, Dailymotion, Streamable and Twitch. Paste the link you were given and you get embed code for that platform.

Two are worth a note. Vimeo unlisted videos carry a private token in the link, as an extra chunk after the video number, and the video will refuse to play if it goes missing, so paste the whole link rather than just the number. Twitch refuses to play unless the embed code names the website it is on, so you have to fill in your domain before the code will work anywhere.

What to do next

Once the video is on the page, the two things most people want to change are how it starts and how it looks. Both have their own guide:making a video play automatically andhiding the YouTube logo, title and suggested videos. If the page felt slower after you added the video, that is a real effect with a real fix, covered inwhy your page got slower.