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.
View Comments
HELLO PUNCH SALAD. OMG what a name!!! how did you get that lucky to have that ROCKSTAR.
Do u help people w/ html on other platforms?? love this "block' loook. Billy
Please email me personally
Hey Robert,
I'm having issues using an autoplay function on my embedded YT videos. I've used the code you suggested, and have done so in the past without any errors. My plugins used to have a function also which allowed it, but now that won't work either. Any suggestions? I have read that the autoplay function doesn't work any more on certain sites. Have you any thoughts on this?
Thanks!
It would really help for my company's homepage.
Eoghan
Hi Eoghan,
Unfortunately this is not possible on Safari / IOS, as Apple doesn't allow auto play from iframes (and youtube is loaded as iframe). It should work on PCs & Android
What you can do is to upload it to your sever and then use HTML5 tags for video, so something like:
video playsinline preload="auto" loop muted autoplay
source src="vid.mp4'" type="video/mp4"
Sadly, your browser does not support the video tag X_x
video
Unfortunately, otherwise it's going to be tricky on IOS / Safari.
Are you testing on IOS or Mac?
nice work, but quality of images could be better: suggest U use Magicthumb
Hi Michael,
Thanks for taking the time to leave a comment. I agree some of the images are bad quality. I need to update them.
Thanks for the tip, I'll check out Magicthumb.
Cheers,
Robert
Hi Robert,
very good guide. My question is, how can I customize my Yotube Video with this Plugin, when I used the "Divi-Builder". Please Give me an answer :).
Hi JR,
It depends, what do you want to do?
If you want to change things around the player, then you need CSS code.
If you want to change something in the player itself, you can use the settings that I mention in this article (that said it's pretty limited what you can do in the player itself).
Hi there Robert
How can I embed my most recent video (instead of a specific video) onto my website, whereby it auto changes once I upload a new video.
Hello,
I haven't done this, but I think you can do the following:
Since you can embed a playlist, you can just create a playlist with all your videos and embed the playlist to your website.
This just means that when you upload a new video you need to add it to the playlist (and set the playlist to display the latest videos first.)
I hope this helps.
Robert
Hi I don't know where to add the css. Is it external? Can I put it with the rest of the code in my embed code block on squarespace? If so, where do I add it?
my code looks like this so far:
Hi Tilly,
The CSS should go to a css file, it's usually called styles.css
If you can't access it you can also put it with the rest of the HTML code and the embed.
But just wrap the CSS code with
, this will tell HTML that this code is CSS.
So it should look like this if you place it in HTML:
I hope this helps! :)
Hi, I'm searching my socks off and saw this page so really hope you can help me out here. Embedding a Youtube video in Presta and it worked well for me, also in iOs it plays in-line now, however I cannot find after 40 googles what the "accelerometer", "gyroscope" and "encrypted-media" is for. Please light me up here. Sorry for the funny English, not my native ;) Thank you very very much.
This did not work for my website https://www.khalsa-website-designers.net/website-designer-muktsar/ as I tried it on this page. I followed everything but did not work. After reading your blog post, I have only one option, that is the upload the videos to my own server and then use html5 code or any WordPress plugin to autoplay.
Thanks so much Robert! Your workaround worked perfectly, and now I have the videos I want playing automatically in my website on mobile devices. Your instructional video was really funny as well as instructional.
Hi there,
Can I use the embed shortcode with rel=0 attribute?