Embed YouTube videos on your WordPress website can improve your viewers’ experience big time.
When we run a content website or course website, it is mandatory for us to know how to add videos the proper way.
In this article, I will show you how to add YouTube videos to a WordPress website without using any plugins.
Why and When to Embed a Video
Videos are the current best way to deliver a message. Social video generates 12 times the shares than text and images combined as stated by smallbiztrends.com, for instance.
Here are a few more interesting facts about videos from the post above:
- Over 50% of people watching videos every day.
- After watching a video, 64% of users are more likely to buy a product online.
- Companies using video enjoy 41% more web traffic from search than non-users.
- YouTube reports mobile video consumption rises 100% every year.
Most importantly, the fact that YouTube is the seconds most popular search engine in the world, makes it a no-brainer for us to add video content to our website.
In other words, if you didn’t combine videos with your text content by now, you are behind and you should start now.
Take our website, for example, most of our blog posts have a YouTube video embedded into them and now you know why.
Embedding a YouTube video in WordPress can be done in a few different ways.
Embed YouTube Video in WordPress Using the Gutenberg Editor
Since the Gutenberg editor was launch, everything got easier. Therefore, adding a video is no different.
The easiest way to embed a YouTube video is by choosing the YouTube block.
The first step is to copy the URL of the video that you would like to add to your website. In our case, we want to add the cute puppies video.
Then, in your WordPress website, add the YouTube block, paste the URL in the block box and save the changes.
When visiting the website again, you’ll see the desired video in the desired location.
It was super simple to use the default YouTube Gutenberg block.
Don’t worry, it’s still effortless to embed YouTube videos when using the classic editor.
Embed a YouTube Video Using the Classic Editor
The classic WordPress editor is super useful to add YouTube videos when we can’t use the Gutenberg editor. Moreover when we want to set advanced options for the implemented video.
More on that later but for now let’s embed a YouTube video while using the classic editor.
As I stated above, the classic editor is our only option when editing a product page or any other custom post type.
To embed a YouTube video, click on the Share button under the video, and copy the video URL.
Back in WordPress, paste the link while in the Visual or the Text view, it will work on both.
Save the changes and revisit the page to make sure it’s working.
If you played the embedded video on your website, you must noticed the built-in player controls.
While in most cases those are useful, there are some cases, such as landing pages, that we would like to hide.
Thus, we’ll use the advanced options to customize the appearance of the added YouTube video and disable or enable various features of it.
The Advanced Options of the Embedded Videos
YouTube gives us the option to embed the video with advanced options.
We can use this method on pages, posts, products, or any other custom post types when using the text editor (it will not work in the visual tab).
Click on the Share option under the video that you would like to add to your website and choose the Embed option.
On the embed screen, you’ll have three options that you didn’t have when using the simple URL link.
- Start time – Chose the starting time of the video or leave unchecked to start from the beginning.
- Show player controls – uncheck this box if you would like to hide the player controls. By hiding the player controls, the visitors won’t see the video length and won’t be able to skip forward or go backward in the video.
- Enable privacy-enhanced mode – once on, YouTube won’t store data about your website’s visitors unless they play the video.
After customizing the video appearance, copy the iframe link on the right and paste it into the text editor of your WordPress page.
Click ‘Update’ and revisit the page to make sure everything works as it should.
The three options that YouTube provides us above are only some of the many options that we can use to customize our video.
In the section below I added a few more customization options that may be useful for your embedded video.
Extra Customization Options
What if you want to autoplay the video on page load? that’s possible! How about disabling the recommended related videos at the end of the video? That’s possible too.
The table below will provide you with many options for your videos with an example of how to use them.
In programming languages,
0 means no, and
1 means yes. All the customization options need to be added to the URL link inside the src attribute of the iframe tag.
|Hide related videos||
|Hide video title||
Don’t worry, here is an easy example for you.
We already know how to get the embed iframe code of our desired video after reading the sections above.
Subsequently, let’s say that we would like to make our puppy video start playing automatically on page load.
We can see that the table above indicates that the autoplay option is
Now we need to add a question mark
? followed by the desired option (autoplay) to the iframe code and the result will look like so:
<iframe width="560" height="315" src="https://www.youtube.com/embed/g6eB8IeX_cs?autoplay=1&" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
All we did was add the
autoplay=1& inside the
src attribute to the right of the URL.
Most importantly, don’t forget of course to change the src URL with your desired video.
Further, if we also would like to add another option from the table above, we will separate each option with a semicolon
For example, the autoplay and the loop options can be added to the URL like so:
<iframe width="560" height="315" src="https://www.youtube.com/embed/g6eB8IeX_cs?autoplay=1&;loop=1&;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Please note, the order of the options does not matter and it will also work perfectly fine when the
loop=1&; is first and the
autoplay=1&; is second like so:
<iframe width="560" height="315" src="https://www.youtube.com/embed/g6eB8IeX_cs?loop=1&;autoplay=1&;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
As you can see, we added the question mark
? only once between the URL and the customization options.
After adding and customizing the desired code based on your needs, make sure to save the changes. After that, revisit your page to make sure the video is working and displayed as expected.
Please note that all the options are supported by YouTube at this point. However, sometimes YouTube changes the options and the code may not work as you expect.
In this blog post, I will try to stay updated and monitor the most recent changes. If any of the code modifications above got outdated, please leave us a comment down below and I’ll fix it.
We created an easy PDF cheatsheet file for you so you can download it and keep it handy any time you need it.
Videos are a great addition to your WordPress website and highly recommended to be used.
We hope that you just learn how simple and easy it is to add videos to your website and why you should.
Please let us know if you have any questions by leaving a comment down below.