Embed YouTube Video in 2018 (Ultimate Guide)

Embed YouTube Video Guide

Sharing is caring!

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

Using an Iframe

How to Embed YouTube video into WordPress with a plugin

Embed YouTube in your WordPress sidebar

Embed YouTube in HTML

Advanced options of YouTube video player

Most common issues with YouTube embed

Embed YouTube video on Facebook in 2018

How to embed YouTube videos in WordPress

Essentially you have below options to embed your video to a WordPress website:

  • Default WordPress Embed feature (oEmbed)
  • WordPress shortcodes for YouTube
  • Using an Iframe
  • Installing a plugin

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.

Embed a YouTube video in WordPress page without plugins (oEmbed)

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:

  1. Go to the blog post or page you want to update.
  2. Click on “Add Media” at top of the text area. This will open the media library.
  3. Then select “Insert from URL” from the left column.
  4. Paste your YouTube URL.
  5. At the left bottom corner, click on “Insert into post” button.
  6. Now the embedded YouTube video will appear in your post.

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.

WordPress shortcodes for YouTube

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.

Using an Iframe

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.

How to get YouTube Embed Code

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.

"open YouTube video"

Under the video click on “Share” and select “Embed”.

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.

embed code

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>

How to customize YouTube player

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.

Most useful YouTube player customization options

 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.

How to Embed YouTube video into WordPress with a plugin

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.

Install YouTube plugin for WordPress

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”.

Go Plugins” in the left column and click “Add New”

2. In the search bar type in “YouTube”.

Type youtube in search bar

3. Then pick the “YouTube” plugin, it should be the first option.

pick the “YouTube” plugin

4. Click on “Install now”.

install plugin

5. Once it’s done installing, click on “Activate”.

“Activate”

6. Now you have “Youtube” in the left column, just click on it.

“Youtube” in left column

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.

YouTube API Key

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.

responsive

Just add a checkmark the “Responsive Video Sizing”.

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.

save

Single video embed

Next, we will be embedding a single video into a post.

1. Go to your post in WordPress,

WordPress post

2. Click on the “YouTube” button above the text area (this button should appear after you’ve installed the plugin).

Click on the “YouTube” button

3.  A popup with multiple choices appears, just click on “Embed a single video”,

click on “Embed a single video”,

4. Paste the video URL. It can be full URL or shortened URL.

Paste the video URL

5. Click on “Submit”.

“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.

Pro users

7. We don’t need that right now, so let’s select “Insert Into Editor”.

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.

short code

9. Save the changes by click on “Update”.

update

10. Let’s take a look at the blog post at the front end.

blog post

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

Inspect element

Here on the right select the mobile icon.

mobile icon

This will resize the window to mobile size.

mobile size

The video looks good and it’s kept its proportions.

How to get a YouTube API Key for a plugin

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.

Display a YouTube gallery in WordPress

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”

save

Next, go to your post.

1. Click on the spot you want the video to appear in the text area.

text area

2. Select the “YouTube” button at the top.

“YouTube” button

3. And in the popup select “Embed a playlist”.

“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.

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.

playlist

7. Grab the URL.

Grab the URL

8. Now paste the URL into WordPress.

paste the URL

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.

pick the gallery

10. Save the changes.

Save the changes

Now if we view the page, you will see that there is a gallery of videos in my post.

gallery

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.

scroll through playlist

Embed a YouTube channel

Adding YouTube channel to your site will look almost the same as the playlist option.

Here is how you can add it:

  1. Go to your post.
  2. Click on the “YouTube” button.
  3. And in the popup select “Embed a playlist”

Here is how you can get the channel URL in YouTube.

1. Make sure you are logged into Google.

logged into Google

2. Click on your icon at the top right corner.

Youtube icon

3. And select “My Channel”.

“My Channel"

4. Grab the URL.

Grab the URL

5. Now paste the URL into WordPress (Make sure it doesn’t have any values like ?view_as….).

paste the URL

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.

pick the gallery

7. Save the changes.

Save the changes

Here is the channel playlist.

channel playlist

And this is how the YouTube channel gallery looks like. As you can see it even has pagination.

channel gallery

Embed a YouTube live stream to WordPress

It is possible to add a YouTube live stream from your website.

  1. In the YouTube popup select “Embed a live stream”.
  2. Add the URL of the channel that the live feed will be streamed from. (or any video from that channel. The plugin just needs the channel).
  3. Go to WordPress.
  4. And select YouTube plugin settings.
  5. In the “Default Not Live Content” text area, you can specify what to display while the stream is not live.

Here is a video tutorial for the live stream:

Embed YouTube in your WordPress sidebar

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.

  1. Go to “Appearance” and choose “Customize”.
  2. Click on “Widgets”.
  3. Select the sidebar you want to add the video to.
  4. In the search box type “video” and select it.
  5. Click on “Add video”.
  6. Select “Insert from URL”.
  7. Grab a YouTube video URL and paste it into the field.
  8. Click on “Add to widget”.
  9. And at the top click on “Save and publish”.

Voila! You are done!

Embed YouTube in HTML

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.

paste the code for embed

You should see some code with the word “iframe” in it.

“iframe” in it

Save the HTML code.

And now you can view the video on your website.

view the video on your website

Okay, the video looks good on desktop, but what about mobile? Let’s check it.

check

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 YouTube embed

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 options of YouTube video player

Speed up YouTube video embed with lazy loading

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:

YouTube Autoplay Embed and other advanced features

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.

Most common issues with YouTube embed

Video owner has disabled YouTube Embed

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?

Why I can’t I upload videos to my WordPress

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.

 

Embed YouTube video on Facebook in 2018

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.

cant embed youtube video player on facebook

 

Check out the discussion about Facebook removing this YouTube embed feature.

 

Sharing is caring!

5 thoughts on “Embed YouTube Video in 2018 (Ultimate Guide)

  1. Billy

    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

  2. Eoghan Groonell

    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

    1. Robert

      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?

    1. Robert

      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

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*