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. It 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 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 right away.
- Check the video. Look at 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 there, not into a regular text box.
- View the preview of your page. Do you see the player? Then also test the play button.
Buttons and screens can change. If you do 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 with blocks in WordPress? A YouTube block is usually the simplest choice. If you want to modify 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? Look for a video block. The name and location may differ between websites.
With a custom HTML block
Add a custom HTML block and paste the complete embed code into it. You can then modify the code, for example to display the player properly on a phone. You will find an example of this further below.
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 entirely without cookies. It also does not automatically mean that your website complies with all privacy rules. It also matters when you load the player.
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 request 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 prevent the player from loading.
You can first display 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 the code for your video. You will find it in the copied embed code, directly after /embed/ and before any question mark. Also change the text next to 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, for example, 9/16 Afterwards, check that the area does not become unnecessarily large on a wide screen.
Then test the page on your phone:
- Check whether the video fits within the page without scrolling sideways.
- Test the play button and the full screen button.
- Check whether a cookie notice or another window covers 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 at 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. Calculate 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 after it finishes? Read how to repeat 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 explain what the window contains. - Test the captions if they are available. Turn them on and pay attention to names, numbers and incorrectly recognized 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 whether 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? Then check the video itself first. If it plays 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 place 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 solve 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 way, you see more than what a logged in administrator sees.
Check that you see the correct video and that the start time is right. Test the display on your phone and any consent process. 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.
