Embed YouTube Video (Ultimate Guide)

  • Post author:
  • Post last modified:February 23, 2020
  • Post comments:33 Comments
  • Reading time:26 mins read
You are currently viewing Embed YouTube Video (Ultimate Guide)

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.


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

Youtube Autoplay Embed (works on mobile iOS & Android iframe)

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)


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.


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


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.


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.


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


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


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”


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.


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.


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.


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>


And here is the CSS you will need for responsive YouTube video:

position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
.iframe-container iframe{
position: absolute;
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 (works on mobile iOS & Android iframe)

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.

For standard embed:

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>

Custom script embed:

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>
  // 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) {

/* Make the youtube video responsive */
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  .iframe-container iframe{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;

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.

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.


Hey there! I started punchsalad.com & TipsWithPunch YouTube channel, out of frustration for time-wasting tutorials on YouTube that didn’t get you anywhere. The tutorials are mostly about WordPress, web analytics, Google Ads, and other useful website-related software.

This Post Has 33 Comments

  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?
    It would really help for my company’s homepage.

    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

      Unfortunately, otherwise it’s going to be tricky on IOS / Safari.

      Are you testing on IOS or Mac?

  3. Michael Maardt

    nice work, but quality of images could be better: suggest U use Magicthumb

    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.


  4. JR

    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 :).

    1. Robert

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

  5. iBayly

    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.

    1. Robert

      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.

  6. Tilly Wentzel

    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:

    1. Robert

      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! 🙂

  7. DullFirePie

    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.

  8. Daljit Singh

    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.

  9. Amanda Salis

    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.

  10. Ben

    Hi there,

    Can I use the embed shortcode with rel=0 attribute?

  11. Mantis Kale

    Robert! You saved the day! This auto-play script fix solved an issue I have been trying to work out in Revolution Slider for weeks! ONE LAST ISSUE THOUGH, is there a way to Loop the embedded video so the grid of YouTube suggested videos doesn’t show at the end?

    Thanks so much! You rock!

    1. Robert

      Hi Mantis,

      I’m glad this helped you! You can use this site to add more parameters: https://www.classynemesis.com/projects/ytembed/
      But you will need to add the parameters to the script, it’s inside playerVars variable in the script.

      I hope this helps!

  12. mario

    where can we add the ?rel=0 snippet to keep from showing unrelated videos?

  13. Minh

    it/s not working on my wordpress, am i did things wrong ?

    1. Robert

      Hello Minh, does it give any errors?

  14. Pravin Redekar

    HI Robert, I am coping embed link of a youtube playlist and pasting it into my HTML code but when I clicked on My video tab on the front -end it only shows 1st video it’s not going on next videos as well when I click on the Playlist button on the top right corner it doesn’t apears.

    I have 5 videos in the playlist,
    > all videos are in private mode,
    > I have given access to all email ids in all 5 videos.
    > Playlist is in Unlisted Mode

    Kindly suggest a solution for the same….

    1. Robert

      Hi Pravin, I think you need to set all the videos to be unlisted. Otherwise, they can’t be accessed.

  15. Miki

    All good above. My question is how I can input the video ID of a channel in the front-end, click submit, and get the result of a gallery of all YouTube videos thumbnails of that channel.

    1. Robert

      Hi Miki,
      If you are using WordPress I tihnk you can just use a plugin for youtube.
      If not then you will need some custom javascript to make it work.

  16. Bob Cummings

    A vast amount of work here – brilliant, thanks so much.
    As I was scrolling through I was looking for any tips regarding ‘search’. I have a hobbyist site for blues and soul history which used to show a YouTube clip at the top of each page based on search criteria so that I never had a dead link. This was via a shortcode which linked to a php function ([bobyoutube listtype=”search” list=”quantic soul orchestra”]) Since 15th November the listtype.search method no longer works as YouTube have ‘deprecated’ it. I was wondering if you could explain how to embed a link using the list.search replacement?

    1. Robert

      Hi Bob,
      It looks like you know more about this topic than I. I didn’t know you can tag videos like this and then they show up in the search.
      So thanks for sharing. Unfortunately, I don’t know how to help you with this one.

  17. Miki

    Hi Robert,
    I couldn’t find such a plugin. This is why I posted my question here. Do you know such a plugin?
    Are you aware of an available javascript that can do it?

    1. Robert

      Ahh, sorry Miki, I misread your previous message. I don’t know a plugin that can do exactly what you asked for. The closest I know is this one: https://www.youtube.com/watch?v=B4yV3AO7G6E
      You can just skip to the end to see the final result. Maybe this can help you get started?

  18. George

    Hi. I try the script for the video to be played on a mobile (ios & android). The video automatically play but the audio has been automatically muted. How do I get the audio to be unmuted automatically?

    1. Robert

      unfortunately, it’s not possible. Mobile devices will block auto-playing videos with sounds.

  19. Dennis

    Bro, what about a playlist???

    1. Robert

      Should work the same way, you just need grab the playlist url in youtube

      1. Dennis

        bro NO…

        <!– 1. The (video player) will replace this tag. –>

        // 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 (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) {

        /* Make the youtube video responsive */
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
        .iframe-container iframe{
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;

        This Code… how would you replace the video id with a playlist id…????

Leave a Reply