Hello Internet people, are you looking for an easy way to embed YouTube video, playlists and channels to your website or WordPress site?
In this complete guide, you will learn all the different ways to embed a YouTube video and how to customize the video for your needs (including code examples).
Check out below a table of contents and pick what you are looking for.
CONTENTS
How to embed YouTube videos in WordPress
Embed a YouTube video in WordPress page without plugins (oEmbed)
WordPress shortcodes for YouTube
How to Embed YouTube video into WordPress with a plugin
Embed YouTube in your WordPress sidebar
Advanced options of YouTube video player
Youtube Autoplay Embed (works on mobile iOS & Android iframe)
Most common issues with YouTube embed
Embed YouTube video on Facebook in 2018
Essentially you have below options to embed your video to a WordPress website:
The difference between the above options is that you are able to customize the video player as you move down the list. In other words, The default feature has no options and installing a plugin will have all possible options.
Alright, I just wanted to mention that you are able to embed YouTube videos into WordPress blog posts without a plugin.
You just have fewer configuration options, but for most people, it’s going to be enough. If you need YouTube autoplay option, check iframe section below.
Here is a video explaining how:
To embed a video to a WP post:
Just paste the URL into the text area. And it should convert the URL to a YouTube video.
In case that doesn’t work, then here is how you embed Y0uTube video in WordPress without plugins:
By the way, this will also work without YouTube. Just use any video.
You can either stream it from other platforms or use your own servers (in most cases this is not recommended though).
You can upload a video by clicking the “Add Media” button in WordPress post and uploading a video.
Here is how you can embed a video by using a shortcode. This will give you the flexibility to set the width and height of the video. Make sure you test it on mobile too.
To implement WordPress YouTube with shortcode, just use below shortcode and replace the red text with your video URL (short URL is okay too).
embed width=”320” height=”180” YouTube URL [/embed]
For example: embed width=”320” height=”180” https://youtu.be/B4yV3AO7G6E [/embed]
You can do this in the visual or text mode in WordPress.
That said, I find shortcode embedding useless, as the other options are either easier or has more customization options.
If you need a lot of customization options such as YouTube autoplay embed, then an iframe will be the best option for you.
You will need to this in text mode in WordPress. I’ll show you below how to do it.
First, to use an iframe, you will need the embed code from YouTube.
This is how you get it:
Just go to the YouTube video you want to display on your site.
Under the video click on “Share” and select “Embed”.
Now a popup will appear with the embed code and some extra parameters that you are able to set. There are actually more embed options, but I’ll show you how to get those later in this article.
Example of YouTube Embed code using an iframe:
<iframe width="560" height="315" src="https://www.youtube.com/embed/B4yV3AO7G6E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Let me show you how to utilize custom options such as autoplay.
First of all, here is how to add parameters in the iframe URL https://www.youtube.com/embed/B4yV3AO7G6E?autoplay=1
If you want multiple options then just add them with “&” (the first value still starts with “?” mark)
https://www.youtube.com/embed/B4yV3AO7G6E?autoplay=1&rel=0&start=33
If you don’t want to think about the format and all the iframe code. Just use YouTube embed generator such as the one by Classynemesis.
autoplay=1 – When a page loads the video will automatically start playing.
rel=0 – Hides related videos at the end of a video.
start=33 – Specify start time (value is in seconds).
end=66 – Specify stop time (value is in seconds).
controls=0 – Removes video player controls such as play, volume, settings etc.
showinfo=0 – Disables the sharing options and title.
loop=1 – Loops the video.
disablekb=1 – Disables the keyboard controls.
cc_load_policy=1 – Captions will be enabled by default.
iv_load_policy=3 – Removes any annotations.
modestbranding=1 – Hides the YouTube logo.
allow full screen – Can be added to the HTML to allow the full-screen player, if you leave it out, users won’t be able to see the video in full screen.
Example below, just remove the red part of the code:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/B4yV3AO7G6E” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
Privacy-enhanced mode – Swap the first part of URL from www.youtube.com to www.youtube-nocookie.com.
Example:
<iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com/embed/B4yV3AO7G6E” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
Full list of YouTube player customization options.
Plugins are useful and easy to install. And you will need one if you want to display a YouTube gallery or a live stream.
Here is a video tutorial:
If you want to know more or take it on your own pace, below is the same tutorial.
Installing WordPress YouTube plugin is easy and it works like all the other plugins.
1. While logged in into WordPress, Hover over “Plugins” in the left column and click “Add New”.
2. In the search bar type in “YouTube”.
3. Then pick the “YouTube” plugin, it should be the first option.
4. Click on “Install now”.
5. Once it’s done installing, click on “Activate”.
6. Now you have “Youtube” in the left column, just click on it.
This plugin provides a lot of different configuration options, I’m just going to cover the main ones.
The first one is YouTube API Key. I’ll get back that one in a minute, as you need to get this from Google. No worries, it’s easy.
Let me first show you other important settings. Just scroll down. As you can see many options to choose from. For me, the most important one is that my video is responsive. So it adjusts to users device size.
Just add a checkmark the “Responsive Video Sizing”.
You can play around with the other options. They are quite clearly explained. But if you have any questions about any of them. Drop me a comment below.
Okay, let’s save these settings.
Next, we will be embedding a single video into a post.
1. Go to your post in WordPress,
2. Click on the “YouTube” button above the text area (this button should appear after you’ve installed the plugin).
3. A popup with multiple choices appears, just click on “Embed a single video”,
4. Paste the video URL. It can be full URL or shortened URL.
5. Click on “Submit”.
6. You will see a preview of the video. And you have 2 options. For Pro users, there is a customize option. This enables you to customize in detail the video attributes and placement on the page.
7. We don’t need that right now, so let’s select “Insert Into Editor”.
8. Now you see a weird URL appear in your post. It’s just a shortcode and WordPress will recognize this and display YouTube video, when the user sees it.
9. Save the changes by click on “Update”.
10. Let’s take a look at the blog post at the front end.
As you can see from the video displays nicely. Let’s look at it on mobile.
by right click anywhere (this will work on Chrome too)
And selecting “Inspect element”
Here on the right select the mobile icon.
This will resize the window to mobile size.
The video looks good and it’s kept its proportions.
To utilize playlist and channel embeds you will need YouTube API Key. If you know already that you need one, just check out this tutorial, where I show you how to get a YouTube API key.
I’m in YouTube plugin’s settings. I’ve just copied the API key into my clipboard.
Now just add it to the “YouTube API Key” field and click on “Save changes”
Next, go to your post.
1. Click on the spot you want the video to appear in the text area.
2. Select the “YouTube” button at the top.
3. And in the popup select “Embed a playlist”.
Let me show you how to grab a playlist on YouTube. This will work with other people’s playlists too.
4. Make sure you are logged into Google.
5. On home page open the burger menu on left, mine is already open.
6. And select the playlist you want to display.
7. Grab the URL.
8. Now paste the URL into WordPress.
9. You are going to see a preview of the playlist and 3 options. I’ll show you the Playlist option in just a second. Let me first pick the gallery.
10. Save the changes.
Now if we view the page, you will see that there is a gallery of videos in my post.
Also here it would look like if we picked the “Playlist” option. It’s basically fully functioning playlist and you even have the option to scroll through the videos in the playlist.
Adding YouTube channel to your site will look almost the same as the playlist option.
Here is how you can add it:
Here is how you can get the channel URL in YouTube.
1. Make sure you are logged into Google.
2. Click on your icon at the top right corner.
3. And select “My Channel”.
4. Grab the URL.
5. Now paste the URL into WordPress (Make sure it doesn’t have any values like ?view_as….).
6. There will be a preview of the channel videos and three options. I’ll show you the gallery option in just a second. Let me first pick the gallery.
7. Save the changes.
Here is the channel playlist.
And this is how the YouTube channel gallery looks like. As you can see it even has pagination.
It is possible to add a YouTube live stream from your website.
Here is a video tutorial for the live stream:
You are also able to embed a YouTube video into your sidebar (in WordPress 4.8 and higher). Let me show you how you can do that.
Sometimes you just need to embed the video in plain HTML.
Here is a video tutorial:
First, grab the embed code of a YouTube video. Now go to your HTML code and paste the code for the embed.
You should see some code with the word “iframe” in it.
Save the HTML code.
And now you can view the video on your website.
Okay, the video looks good on desktop, but what about mobile? Let’s check it.
Doesn’t look like the video is responsive. By default, it won’t be and you’ll need a bit of CSS to make it responsive.
Responsive web design just means that the video will adapt to any screen size. This is what we want our video to do too.
So no matter the device, it always looks good and in the right proportion.
To make it easier for you, just add a div around the iframe and give it a class name “iframe-container”.
For example:
<div class=”iframe-container”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/9YffrCViTVk” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
</div>
And here is the CSS you will need for responsive YouTube video:
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
So now if you check the website on mobile. And even if you change the screen size, the video stays in same proportions and the video responds to my screen size.
Advanced tip! If you have multiple videos on your page, try to set up a plugin to lazy load YouTube videos.
This will make your website faster to load and will provide a better experience to your user. I’m using a3 Lazy Load plugin and it works great.
Here is how you can lazy load a YouTube video in WordPress:
Some times you wand to autoplay your Youtube video embed. I’ll first show you the standard way of doing it with an iframe and then I’ve included a bit of code that will make the autoplay work also on mobile devices, both IOS & Android!
I’ll be using WordPress, but it works exactly the same in HTML.
Add this: ?autoplay=1&mute=1
at the end of the Youtube video embed URL. But this only works on desktop.
For example:
<iframe id=”iframeID” width=”560″ height=”315″ src=”https://www.youtube.com/embed/x1XYto1YKTo?autoplay=1&mute=1” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
Grab the script that works on mobile (IOS & Android):
Original code is taken from stackoverflow.
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div class="iframe-container">
<div id="player"></div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '100%',
videoId: 'YOUR_VIDEO_ID',
playerVars: { 'autoplay': 1, 'playsinline': 1 },
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
<style>
/* Make the youtube video responsive */ .iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style> If you noticed that by default Youtube autoplay embed is not working. But with a bit of extra script from above. You will be able to use autoplay on mobile devices (Chrome & Safari) even while using an Iframe.
As a bonus tip, if you want to know how to get different embed options like autoplay.
Just go to Google and search for the YouTube embed generator.
I like the one from “classynemesis”, but essentially they are all the same.
On the site, you will need to add a video URL and you’ll be able to add all the different customization options.
Just pick features you need and then copy the embed code at the top.
If you are having issues with embedding YouTube video to your site, usually it is because the user has disabled the option for other to embed that particular video. So the embed will not work.
In that case, you will see this message:
“Watch this video on YouTube. Playback on other devices has been disabled by the video owner”
In this case, you can’t use this specific video. Try to find another similar video or otherwise you need to think of something else, perhaps a screenshot from the video that takes the user to the video?
You should be able to upload any video to WordPress with “add media” button. However, it’s highly recommended to use YouTube or Vimeo and embed the video into your site.
“To embed a video” means that the video looks like it’s on your website, but in reality, it’s a little window (iframe) that is streamed from YouTube’s or Vimeo’s servers.
This way you will save a lot of bandwidth and hassle with storing the video yourself.
Unfortunately, it is not possible to embed YouTube video player on Facebook in 2018.
Facebook removed the ability in 2017 in effort to boost Facebook video popularity. So you are not able to show the YouTube player on your FB timeline.
The best you can do is to show a big thumbnail, however when someone clicks on it, they will be taken to YouTube. Below is an image of this.
Check out the discussion about Facebook removing this YouTube embed feature.