You embed a YouTube video by pasting the embed code into an HTML block on your website. Open the video on your computer and choose 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 will read 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 embedding. This places a video player on your page while the video remains hosted on YouTube. You therefore do not need to upload the video file to your website.
A regular link sends your visitor to the video. With embed code, you show the player on your own page. Some website builders create a player from a regular video link themselves.
| What do you want to do? | What are you using? |
|---|---|
| Place 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. View the title and play a short section.
- Choose 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 into it, not into a regular text field.
- View the preview of your page. Do you see the player? Also test the play button.
Buttons and screens can change. Do you not 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 in WordPress with blocks? 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 entry and view the preview of your page.
Are you using another editor or a separate page builder? Search for a video block. The name and location may differ from one website to another.
With a custom HTML block
Add a custom HTML block and paste the complete embed code into it. You can then adjust the code, for example to display the player properly on a phone. You will find an example of this further down.
Does the code disappear after saving? Ask your website administrator whether your account is allowed to place 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 entirely without cookies. It also does not automatically mean that your website complies with all privacy rules. When you load the player also matters.
According to the Belgian guidance on cookies and consent for cookies and trackers that are not strictly necessary, prior consent is generally required. Visitors must know what they are giving consent for and actively choose to do so themselves.
Does your website need to ask for consent before loading the player? Set up your website so that the iframe is loaded only 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 area with an explanation, such as: “This video is loaded through YouTube.” Ask your website administrator to check that the player really loads only 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 area 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 will find it in the copied embed code, directly after /embed/ and before a possible question mark. Also change the text after title to a short description of your video.
The ratio 16/9 gives you a landscape video area. For a portrait video, you could use 9/16 for example. Then check that the area 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 horizontal scrolling.
- 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 determines 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 that 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? Then do not use a second question mark. Add in your HTML code &start=90 after the existing setting.
Save the page and check where the video begins. Do you want the video to play again after it ends? Read how to loop a YouTube video.
Making your embedded YouTube video accessible
Also put important information from the video in 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 houseplants” instead of “Video”. Assistive tools can use this to tell people what the window contains. - Test the subtitles if they are available. Turn them on and pay attention to 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, sound does not start while they are still reading.
Your embedded YouTube video does not work
First open the video on YouTube. Does it not work there either? Then 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 see only 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 area 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 width of the page. Also check the width of the area 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 also update the references on your website.
Check the page before publishing it
Also view the page while logged out, preferably in a private window. This shows you more than what a logged in administrator sees.
Check that you are seeing the correct video and that the start time is correct. Test the display on your phone and any consent requirement. Finally, play a short 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.
