You embed a YouTube video by pasting the embed code into an HTML block on your website. Open the video on your computer and select Embed under Share. Copy the complete code there. In WordPress, you can usually paste the regular video link into a YouTube block. Visitors can then watch the video on your page.
Below, you’ll learn which approach suits your website and how to test the video on your phone.
Using a YouTube link or embed code
Embedding is also called embedden. It places a video player on your page while the video remains hosted on YouTube. So you do not need to upload the video file to your website.
A regular link sends your visitor to the video. With embed code, you display the player on your own page. Some website builders automatically create a player from a regular video link.
| What do you want to do? | What are you using? |
|---|---|
| Add a clickable link to the video | The regular video link |
| Add a video using a video block | Usually the regular video link |
| Place the player in HTML yourself | The embed code with an iframe |
An iframe is a window that displays content from another website. In this case, it is the YouTube video player. HTML is the code used to place content on a web page.
Adding the YouTube embed code
Open the video on a computer. You can then copy the code and test it on your website straight away.
- Check the video. Check the title and play a section.
- Select Embed under Share. Copy the complete code.
- Open your website editor. Go to the page where you want to place the video.
- Add an HTML or custom code block. Paste the embed code there, not into a regular text box.
- Preview your page. Can you see the player? Also test the play button.
Buttons and screens can change. Can’t you see the Embed option? Compare your screen with the official YouTube explanation of embedding.
Does your website builder only ask for a video URL, meaning a web address? Use the regular video link. That field should not contain HTML code.
Embedding a YouTube video in WordPress
Are you working with blocks in WordPress? A YouTube block is usually the simplest choice. If you want to edit the embed code yourself, use a custom HTML block.
With a YouTube block
- Open your post or page in the editor.
- Add a block and search for YouTube.
- Paste the regular video link into the field.
- Confirm the input and preview your page.
Are you using another editor or a separate page builder? Search for a video block. The name and location may vary between websites.
With a custom HTML block
Add a custom HTML block and paste the complete embed code into it. You can then edit the code, for example to display the player properly on a phone. You’ll find an example of this further down.
Does the code disappear after saving? Ask your website administrator whether your account is allowed to add iframe code and whether the website permits that code.
Embedding a YouTube video with privacy mode
For privacy mode, use the domain www.youtube-nocookie.com in the embed code. It is already included in the code example below.
This mode does not guarantee that the video will work completely without cookies. It also does not automatically mean that your website meets all privacy rules. When you load the player also matters.
According to the Belgian explanation of cookies and consent prior consent is generally required for cookies and trackers that are not strictly necessary. Visitors must know what they are consenting to and actively choose it themselves.
Does your website need to ask for consent before loading the player? Set up your website so that the iframe only loads after that consent. A cookie notice above a player that has already loaded does not stop the player.
You can first show an empty video box with an explanation, such as: “This video is loaded through YouTube.” Ask your website administrator to check that the player really only loads after consent. The example code below does not arrange this.
Making your embedded YouTube video suitable for mobile
A player with a fixed width can extend beyond the page on a phone. This example code makes the player the same width as the box where you place it.
<div style="width:100%; aspect-ratio:16/9;">
<iframe
src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="Uitleg over het verzorgen van kamerplanten"
style="width:100%; height:100%; border:0; display:block;"
allowfullscreen>
</iframe>
</div>Replace VIDEO_ID with your video’s code. You’ll find it in the copied embed code, directly after /embed/ and before any question mark. Also change the text after title to a short description of your video.
The ratio 16/9 gives you a landscape video box. For a portrait video, you could use, for example, 9/16 Afterwards, check that the box does not become unnecessarily large on a wide screen.
Then test the page on your phone:
- Check that the video fits within the page without scrolling sideways.
- Test the play button and the full screen button.
- Check that a cookie notice or another window does not cover the buttons.
Setting a start time for your embedded YouTube video
Do you want to skip the beginning of a video? Add start to the address after srcwith the start time in seconds. This lets you choose where the video begins. It does not make the video play automatically.
A fictional example: the explanation you want to show begins after 1 minute and 30 seconds. Convert it as follows: 1 × 60 + 30 = 90 seconds.
src="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=90"Is there already a question mark with a setting after the address? Do not use a second question mark. In your HTML code, add &start=90 after the existing setting.
Save the page and check where the video begins. Do you want the video to play again afterwards? Read how to repeat a YouTube video.
Making your embedded YouTube video accessible
Also put important information from the video into text on your page. This allows visitors to read that information if they cannot hear the sound or use the player.
- Give the iframe a clear title. For
titlewrite, for example, “Explanation of caring for indoor plants” instead of “Video”. This helps assistive technologies explain what the window contains. - Test the subtitles if they are available. Turn them on and watch for names, numbers and incorrectly recognised words.
- Write out the most important explanation. For an instructional video, you can put the steps briefly on the page.
- Test without a mouse. Use the Tab key. Check that you can reach the player and see which button you have selected.
Preferably let visitors press play themselves. That way, no sound starts while they are still reading.
Your embedded YouTube video is not working
First open the video on YouTube. Does it not work there either? Check the video itself first. If it does play there, look at your website’s code and settings.
| What do you see? | What can you do? |
|---|---|
| The code appears as text on the page | Paste the code into an HTML block, not a text block. |
| You only see a clickable link | Use a video block or put the embed code in an HTML block. |
| The player displays an error message | Read the message. Also check that the complete code for the video, the video ID, is included in the embed code. |
| The video is not allowed to play on your website | Ask the owner whether embedding is allowed. You cannot resolve this using the player’s regular settings. |
| The video box remains empty | Check whether you still need to give consent to load the player. Also test in another browser. |
| The player disappears after saving | Ask the administrator whether the editor or security settings remove iframe code. |
| The video is too wide on your phone | Use code that follows the page width. Also check the width of the box around the player. |
Do you want to remove one of your own videos? First check which pages you embedded it on. Read how to delete a YouTube video and then update the references on your website as well.
Check the page before publishing it
Also view the page while logged out, preferably in a private window. This way, you see more than an administrator who is logged in.
Check that you see the correct video and that the start time is right. Test the display on your phone and any consent requirement. Finally, play a section and check the sound.
Do you want to upload your own videos first and then use them on your website? Read how to start a YouTube channel.
