How to Embed a YouTube Video in WordPress

Embed YouTube Video in WordPress

YouTube has over a billion users—almost one-third of all people on the Internet—and every day people watch hundreds of millions of hours on YouTube and generate billions of views (source). When you combine those numbers with WordPress powering 27% of the web, you’ve certainly got a match made in heaven.

It’s almost inevitable that you’ll want to embed a YouTube video on your WordPress site. This could be a marketing video for a business site, an educational or instructional video, a personal video embedded on your blog, etc. Let’s walk through the various options, and I’ll help you choose which method is best for your situation.

There are 4 main ways to embed a YouTube video in WordPress:

  1. Using oEmbed (easiest)
  2. Using the embed shortcode (a few more options)
  3. Using an <iframe> (a lot of customization)
  4. In your WordPress sidebar

If you’re in a hurry, watch our YouTube video embed tutorial:

01 Easiest Way to Embed a YouTube Video in WordPress

The easiest way to embed YouTube videos in WordPress is to simply paste the URL onto your page/post edit screen. Make sure you’re using the Visual editor, and not in Text mode.

Embed YouTube Video on Visual Tab
Make sure you’re in “Visual” mode, not “Text” mode

Then just paste the YouTube URL on it’s own line.

You can use the shortened, share URL: https://youtu.be/IZuTNOxTA-Q

YouTube share URL
How to get the YouTube share URL

Or use the full URL in your browser’s location bar: https://www.youtube.com/watch?v=IZuTNOxTA-Q

YouTube video URL in browser
You can also use the full YouTube watch URL

Either one will work.

Here’s a quick animation:

Embed YouTube Video in WordPress animation

This works because of a technology called oEmbed. There are other types of content you can insert into WordPress just by pasting the URL in your post screen. Learn more about WordPress oEmbeds »

02 Embed YouTube Video in WordPress using a shortcode

If you’d like to set a maximum width or height on your video, you can use the embed shortcode. The shortcode works in both Visual and Text mode, and has two optional parameters:

  • width
  • height

Just add the following code into your post edit screen:

WordPress embed code for YouTube video

Add your YouTube URL where it says “YOUTUBE URL GOES HERE,” and change the width & height parameters to fit your needs.

  • Remember: These are maximum dimensions, not exact. It will prevent the video from being any larger than what you define, but it could possibly display smaller.

You can also use the Media Library to add a YouTube video. This will use the same embed shortcode as above, it’s just a different way to do it.

  • Place your cursor on a new line, where you want to embed the video
  • Click Add Media
  • On the left, click Insert from URL
  • Paste in the full watch URL or the share URL from YouTube
  • Click the Insert into Post button at the bottom of the screen

WordPress YouTube embed, media modal instructions

03 Embed YouTube Video in WordPress using an <iframe>

If you want much more flexibility over how your YouTube videos are displayed on your WordPress site, this method is for you. It’s a little more technical than the first 2 methods, but still not too difficult.

Using the <iframe> embed method will provide you with the following options for customization:

  • Fullscreen: Whether or not to allow visitors to enlarge the video to cover their entire screen
  • Related Videos: Whether or not to show related videos after this video is finished playing (they are chosen by YouTube)
  • Player Controls: Whether or not to show the play/pause, volume, captions, etc. buttons
  • Title/Sharing: Whether or not to show the video title & sharing options
  • Autoplay: Whether or not to automatically start playing the video when the page loads
  • Captions: Whether or not to show video captions by default
  • Start Time: Choose a specific time within the video for it to start
  • Privacy: Enable advanced privacy settings
  • …and more (see below)

You used to be able to adjust the video size, but YouTube has removed this setting. They now use an updated embed code that wraps the <iframe> in a <div> and uses CSS to make the video responsive at all screen sizes.

How to use the <iframe> method

  • On YouTube.com, navigate to the video you want to embed
  • Click on Share
  • Then click on Embed

YouTube share/embed buttons

  • You can adjust the settings by checking the boxes below the embed preview

YouTube advanced embedding options

  • Copy the code
  • Go back to your WordPress editing screen, and click on the Text tab
  • Paste the code on it’s own line, where you want the video to appear

How to customize YouTube video playback via the URL

Now I’ll show you how to adjust all the settings that I mentioned above.

Here is a list of URL parameters you can add to the end of the <iframe> src attribute:

  • rel=0 – disables related videos at the end
  • controls=0 – Hides the player controls (play/pause, volume, captions, settings, fullscreen, etc.) at the bottom
  • showinfo=0 – Hides the video title & sharing options at the top
  • autoplay=1 – Starts playing the video automatically, when the page loads
  • loop=1 – Repeats the video, as soon as it reaches the end
  • disablekb=1 – Disables the keyboard controls
  • cc_load_policy=1 – Automatically turns on captions
  • start=60 – Starts the video at a specific time (Use a positive integer denoting seconds. Ex: start=60 will start the video at the 1:00 mark.)
  • end=180 – Stops the video at a specific time (Use a positive integer denoting seconds. Ex: end=180 will stop the video at the 3:00 mark.)
  • allowfullscreen – This is not a URL parameter, but you remove this attribute from the <iframe> to disable fullscreen mode
  • iv_load_policy=3 – Hides all video annotations
  • modestbranding=1 – Removes the YouTube logo from the control bar
  • Privacy-enhanced mode – This is done by checking the “Enable privacy-enhanced mode” checkbox. The URL changes from www.youtube.com to www.youtube-nocookie.com.

View a full list of parameters & explanations »

Examples

Every embed code is wrapped in a div that contains CSS styles to make the video responsive. For the sake of brevity, the following examples omit this parent div, and just show the iframe code.

Disable fullscreen mode (note “allowfullscreen” has been removed):

<iframe src="https://www.youtube.com/embed/IZuTNOxTA-Q" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0"></iframe>

Disable related videos rel=0:

<iframe src="https://www.youtube.com/embed/IZuTNOxTA-Q?rel=0" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>

Hide player controls controls=0:

<iframe src="https://www.youtube.com/embed/IZuTNOxTA-Q?controls=0" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>

Hide video title & sharing options showinfo=0:

<iframe src="https://www.youtube.com/embed/IZuTNOxTA-Q?showinfo=0" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>

Autoplay the video on page load autoplay=1:

<iframe src="https://www.youtube.com/embed/IZuTNOxTA-Q?autoplay=1" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>

Automatically turn captions on cc_load_policy=1:

<iframe src="https://www.youtube.com/embed/IZuTNOxTA-Q?cc_load_policy=1" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>

Start the video at a specific time (ex: 1:00) start=60:

<iframe src="https://www.youtube.com/embed/IZuTNOxTA-Q?start=60" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>

You must convert the time into total seconds.

04 How to Embed a YouTube Video in your WordPress Sidebar

As of WordPress 4.8, there’s a new video widget that makes embedding a YouTube video in your sidebar a breeze. Let’s take a look at how to set it up.

Embed YouTube video in WordPress sidebar, animation

  1. Navigate to Appearance > Customize (you could also go to Widgets, but Customize shows you a real-time preview)
  2. Click on Widgets
  3. Then find the sidebar area that you want to add the video to (you might have multiple sidebar areas listed)
  4. Click Add Widget
  5. Search for the Video widget, and click on it
  6. Click the Add Video button
  7. On the left, click Insert from URL
  8. Then paste the YouTube video URL into the box
  9. You’ll see a preview of your video
  10. Click the Add to Widget button
  11. At the top of the Customizer, click Save & Publish

If you have any trouble embedding a YouTube video on your WordPress site, please let me know in the comments and I’ll try to help out.

Did you know you can embed YouTube playlists in much the same way as videos?

Learn how to embed a YouTube playlist in WordPress »

8 Commentson "How to Embed a YouTube Video in WordPress"

  1. /

    In WordPress.org posts, starting a Youtube from a particular point, e.g., at 0:30 seconds, works. But when embedding a Youtube in the sidebar, it only seems to allow starting at the beginning, i.e., at 0:00. Is there a remedy to that? Thanks.

    → Reply
    1. (Author) /

      Great question, Mary. The new WordPress Video Widget uses a custom video player (instead of the standard YouTube player), and it does not recognize the “start at” variable.

      So using the Video Widget will not work.

      However, if you use the iframe method I described above, you can insert the iframe code into a “Text” widget in your sidebar, and that will honor whatever “Start At:” variable you choose.

      So you’d add a “Text” widget to your sidebar, switch from Visual mode to Text mode, and then your iframe code would look like this:

      <iframe width="560" height="315" src="https://www.youtube.com/embed/yAGyYGPsSZw?start=30" frameborder="0" allowfullscreen></iframe>

      Let me know if you have further questions.

  2. /

    Thank you for your helpfulness. Using the iframe method, that did work, to a point. It starts at the preferred delayed start time now (e.g., at 30 seconds). Unfortunately, after the video has played, whether a person clicks the start arrow in the middle of the screen or the replay arrow at bottom left, when it replays, it goes back to playing the video starting at 0:00. In case it’s helpful to know, I also have it set not to allow suggested videos at the end (so my custom code reads start=30&rel=0). When I grabbed the embed code at Youtube, I first made these choices
    (unchecked) Show suggested videos when the video finishes
    (checked) Show player controls
    (checked) Show video title and player actions
    (checked) Enable privacy-enhanced mode [?]

    Thanks again for any help you can offer.

    → Reply
    1. (Author) /

      Mary – Unfortunately, I don’t think there’s any way to get it to start at 0:30 when it is re-played. The parameters in the iframe method only work for the initial play. I wish I had a better answer, but that’s just how YouTube embedding works. Sorry :-/

  3. /

    The part about making the video play automatically and play at a certain time was very helpful. As im not a very technical person when it comes to coding, this was easy to understand. Basic HTML is as much as i can do haha.

    Interesting article!

    → Reply
    1. (Author) /

      That’s exactly why I wrote this article, Connor. For folks like you. Really glad it helped you out :-)

  4. /

    Thank you for sharing your expertise. The problem I’m having is WordPress is apparently stripping the code I am adding (iframe I suppose) and converting it into their format. So even though I enter this:
    [ youtube https://www.youtube.com/watch?v=myvideo?autoplay=1&rel=0&controls=0&showinfo=0&w=560&h=315 ]
    When I save, it converts to this:
    [ youtube https://www.youtube.com/watch?v=myvideo?autoplay=1&rel=0&controls=0&showinfo=0&w=560&h=315 ]
    My goal is to get the video to autoplay without allowing the viewer to scrub (rewind/fast forward).

    → Reply
    1. (Author) /

      Hi Alicia — So you’re actually using what’s called the “embed code,” not the <iframe> code. First, make sure you switch from the Visual mode to the Text mode of the editor. Look in the top-right corner of the editor and click on the Text tab.

      Then you’ll paste the following code into the editor (replace with your video ID):

      <iframe width="560" height="315" src="https://www.youtube.com/embed/GSu1xOOJzKk?rel=0&controls=0&autoplay=1&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

      By placing the actual HTML code of the <iframe> embed, WordPress will not modify the code, and it should correctly autoplay and hide the player controls.

      Let me know if you’re still having issues after giving this a shot.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.