Last Updated on March 28, 2019 by Sunny Staff
Embedding youtube videos on your WordPress website is easy and a great way to deliver marketing message, how to videos (like this one) and provide meaningful content for your viewers. This step by step video will show you how to embed video into WordPress easily. Or see the blog post we created to help you.
Videos transcript embed video WordPress:
00:06 Hi, my name is Dylan and I’m with Sunny HQ. And today, I’d like to talk a little bit about how to embed YouTube videos in your website. There’s a lot of ways that you can do this and everything from purely manual, to plugins, to kind of a hybrid system where there are some online helpers. And I want to touch on these things mostly so that you understand what are the parts of these and how to use the different variables with the different kind of toggles, let’s say, in the YouTube video embed code and so that you can also have some awareness and to see how really easy it is to do this.
00:43 Of course, we use YouTube. It’s great. It’s free. It wasn’t that long ago that it costs quite a bit to host your own videos, but with the advent of YouTube and our ability to embed this in your site, it can make a huge difference on driving traffic as well as providing some very meaningful content on your own website. What we’re going to look at today is how to embed this video inside just a sample website.
01:11 First are the basics, if you’re going embed the YouTube into really any site, then you’re going to want to know where to pull that embed code from. I want to point out a couple of things as we’re moving through this. The share icon typically does move around in YouTube from time to time. So just to be sure that you’re looking for that share icon sometimes is without the word and just has the arrow. You’re going to find this on any YouTube video. Just click on share and it’s going to pop up a dialog box. And in that, we’re going to find ways that I can share it directly or if we look at share a link down towards the bottom, you can see the word embed. We’re going to click embed and it’s going to pop up yet another box.
01:59 And this is the basic code, and this works for the most part. What I want to show is make sure that if you pull this up, you’ll notice it looks like this is the entirety of … It looks like that this is everything that’s on the screen. But if we actually scroll down, you can see there are some other options. We can turn on and off the player controls and we can enable privacy-enhanced mode. And what privacy-enhanced mode is it actually put some code in to kind of disable user tracking and things like that. It doesn’t really affect the look and feel but it does, like it says, enhance the privacy so that you can embed this on your site and know that there is a certain amount of tracking that is not created from that.
02:54 That’s really it. You can change the height and the width of that but we’ll get into that in just a minute. The easiest thing to do here is just to copy this code and then we’re going to place that inside the page of our website. So as you can see, I have it as just the standard YouTube page called the YouTube embed test. And these, of course, are great videos that I’m going to post from time to time.
03:15 I want to point out this really quickly. Becoming really familiar with the differences between the visual tab and the text tab, it’s important that you use the right tab and I’ll show you why. If we are on the visual tab and I paste this code, you can see the code displays and that’s not what you want because if we then update that, you’ll see that instead of the nice video on the page, I get the code on the page.
03:42 So if that’s happening, you just need to go back to your post or your page. And I’m going to cut this and click on the text tab. And now you can see I’ve got just a little bit of code here. This is my headline and that’s the body and I just put in some spaces so you can ignore those. I’m going to paste that same code in here and then you can see when I click the visual tab, my video displays. And then likewise when we update this and refresh, we’re going to see our video displays nicely.
04:21 Now I want to break this apart really quickly just so that we can see what’s happening here. So, I’m going to bring this code up on the page real quickly. This is that basic YouTube code that we created. The no cookie just real quick came in. It’s a part of the enhanced privacy mode. I can change the height and the width of my video. And then as a note, each of the YouTube videos, and this becomes important for other widgets or other plugins. If we’re going to use that same video, we don’t need necessarily to cut and paste in this entire iframe code. We would just use the video identifying code. And that’s what you’re going to find here and it’s usually right after or usually it’s always right after the last forward slash and before the question mark.
05:23 In the same thing, you can find it’s going to be … In YouTube, you’ll see at the top that exact same code is right here. It’s going to look a little different depending on what you have selected within the video. But I’d like to point that out because that is a really key piece of information that I want you to understand. This is just saying that we’re at YouTube, we’re going to watch this video and the video equals this code. So that, for all practical purposes, is the name of this. It’s how YouTube identifies this particular video.
05:58 Back over here … One real quick thing, maybe you’ve seen I embedded a video before and had a time where at the end of the video, a bunch of related videos come up, not your related videos but just anything. And that’s something that most people would like to suppress so that you don’t drive traffic away from your own content. And the way that that’s done, there’s not unfortunately in the YouTube embedder.
06:31 In here, there’s not a little toggle for that. That’s something that’s going to be done manually or we’ll get to there’s another plugin and another embedder helper app that I’ll show you in a minute that helps you do that. But it is really simple to do that. All we need to do after the video code is to add this question mark and an REL for related equals 0. So, this simple little thing, REL equals 0 cancels out this related videos.
07:14 Now this used to completely cancel out the videos. It used to just go to a black screen with a play button or replay. Not that long ago, YouTube introduced an update and now you have to have related videos. But in this case, it will go to related videos that are yours or on your channel rather than driving off to other related videos. You can’t completely get rid of that. There are some other ways that you can do that by using other services but as far as YouTube goes, you have to do that.
07:45 I do want to stress this, for the most part, I would highly recommend that you do that because you really don’t know what if you let the related videos flow in, you really have no control over that. And so the content can be a little sketchy depending on a what your video is made and how other videos might relate just in any way, so definitely use that.
08:08 All right, so that is the main and the easiest manual way. Let’s move this out of the way. Like I said again to place the video in here and of course just some really quick things, we can change the height and the width as I said, so we could come in and say that this is 1000 by 600, and update. You can see that’s going to update that very simply. And of course, you can places those down the page however you’d like.
08:50 Just a couple of other ways, the first of which I want to touch on is this screen. There’s a link to this custom video embed generator in the post as well as below this video. This is a really great tool. We use this quite a bit. You can memorize or keep a cheat sheet of all these little toggles, if you remember back to things like this related. But this tool helps to build that for you on the fly. What I want to do is take my same video and I’m going to place this, so this is where that video ID or you can put the URL and it comes into play.
09:28 As you can see, so I have my same video. This is nice because this lets me set my width and height, so here I can set this to 1000 by 450. I can set a start and end time for this. And there’s a whole bunch of different toggles for this so I can force high definition, enhance security, enhance privacy, autoplay and loop. I can do modest branding which basically turns off a lot of the different features that you’re going to see.
10:02 The easiest thing to do is to actually just go through these and try a lot of them out, so there we go. So on modest branding, disable dropdown video information. There’s a little slide down that comes down. I can show closed captioning and so on and so forth. I’ll let you read through those things but at the end of the day, it’s really helpful to be able to turn this on or off depending on what your goal is for that video.
10:33 And then this, like we mentioned before, has a checkbox for do not show related videos on playback. So instead of needing to place the code in, that’s where you can select that. And then there are some other, on-the-fly playlist and things we won’t get into right now. I’ll save that for another video but you can easily read up on that if you’d like by just clicking on that question marks there.
11:00 After that, what you’re going to end up with is the direct link to that video, a short link, a full screen link as well as the embed code. And if this is … This is not my video and so I can’t select a new thumbnail. But the nice thing is if it is your video and you’re logged in as this indicates to your own channel, you will be able to select then a different thumbnail which is a super handy tool as well. Up at the top is where we’ve got our embed code. That’s what we’re after, so I’m going to copy that. Again, go back into my page and paste that and click update. Click update and there’s my video. So, all right.
11:58 Lastly, I would like to touch on just a couple of different plugins that are really, really handy. And these are just really easy ways so that you don’t have to use that customized embed or the manual code to place your video. One of them links to all of these. They’re going to be in the video and in the blog post as well. One of them is the YouTube Widget Responsive, and that’s specifically for widgets and short code. And I’ll explain that in just a minute. And then another is the simple YouTube embed. Both of these are really great options that will allow you to embed. Both will make the video responsive which means the video will shrink or grow to fit the spot that it’s supposed to based on what the device is that is viewing this.
12:46 There’s also going to be real simple to … You can either download or install this directly from the back end of your site and we won’t cover that in this because I just want to touch on the actual functionality of these two plugins. But both of them, like I said, are really trusted great options. So, to do that right, you’ll just go to your site, install the plugin, and the settings beyond that are fairly straightforward. And we’re going to handle the specific features and functionality of those two in a separate video as well.
13:20 Now one last thing I will note that in most of WordPress sites and most themes, there already is a prebuilt widget for videos. One thing you can do if you don’t want to install a plugin and you are not really sure about the manual edits is just to go ahead and look really quickly first to see if that’s available. No installation is required. We’re just going to go to appearance and widgets, and then we can just look down the page to see if something says video. So, displays a video from the media library or from YouTube video, Vimeo … Excuse me .. or another provider.
14:08 So from here, we can just scroll up and we can place this, for instance, in the sidebar. From there, we’re going to just select … You can title this or not … select that box. You can either select a video from your media library. I don’t currently have any or I can insert from a URL. And in that case, I’ve gone out. I’ve grabbed my URL from YouTube. Make sure not to pull that embed URL. That won’t work. We need to pull that directly from the top, the address bar in YouTube. And then paste, and add the widget and make sure to click save. And then what we can find there is, let’s see, this is where that’s going to lay out and that just is going to display.
15:01 And now this is only for places where you can place specifically widgets. So typically, that is in a sidebar. Some sites do have large widgets in footers. This particular, I can place them in the top bar and in the footer as well. But I do want to point that out, this doesn’t necessarily help you place that video inside the content of a page. For that, you would need to go back and refer to either one of the YouTube plugins that we discussed earlier.
15:32 All right, well that’s it for now. Remember embed video WordPress. Thanks so much and if you have any questions, please, please post your comments. We’ll be happy to get back to you with answers or go to SunnyHQ.io and post your questions there. We look forward to it. All right, thanks.
