Now that you know how to use the WordPress 3.9 Media Library to insert images into your pages, you’re going learn how to add video to your pages. WordPress has changed the way it does this considerably and so we’re going to start off with YouTube.
Adding Videos From YouTube or Vimeo
There are two ways to embed videos and I’m not talking about hosting a video yourself with your own player but rather embedding a hosted video. You can do this one of two ways. You can embed the URL of the video or you can embed the video as an iframe.
1st Method: Embed the URL of a Video
We’re going to start by embedding this skit by just clicking on the share button and we’re not going to use the embed iframe, we’re just going to use the URL. WordPress now parses the URL. So if I paste this URL here and hit update a link to the video will show up on the page. Again, all you have to do is take the URL and place it in the page.
Ray asks, “Do you have to give credit to the person who made the video?”. No because it’s automatically given to them since you’re using their video. You’re not stealing their video, you are sharing their video. YouTube is specifically designed for that. If they didn’t want you to do it they would prevent sharing but nobody in their right mind has YouTube videos that are public and doesn’t share them.
This also works with Vimeo. Let’s go to My Videos and Explainer Videos. I’ll take my impersonator President Obama video. If I want to share this I can do this one of two ways. I can grab the link like that, come back over to this page and let’s paste it. Hit update, come back over and refresh it and Vimeo goes in just as easily as a YouTube video.
All you have to do is paste that URL. Please note that this doesn’t work in earlier versions of WordPress. This is something that’s fairly new, actually since version 3.8.
Auto Sizing and Responsiveness
The nice thing about using the URL link is that it automatically makes the video as big as it can be to fit in the space on the Page. You’re not telling it how big it should be WordPress just automatically makes it that big and actually, it does a pretty good job of reducing it in size.
It’s not perfect but there are ways for you to make it better. Interestingly, it’s not making the YouTube video responsive but the Vimeo video is responsive in that it doesn’t change its aspect ratio. There are plugins to improve on this and make it a bit more responsive but really it works just fine. And on a mobile device once you click on the video it pops right up to the right size.
2nd Method: Adding Videos Using Iframe
So the other way to embed videos is to use the iframe. For example, here on YouTube the iframe is this one here under share and then go to embed. But unlike the URL link, when you are inserting an iframe you can see it has a width and a height specified. You might be inclined to click on the video size choices and choose something other than what it’s been set at.
I’ll show you that. I’ll pick the next size up and copy it. And again, unlike the URL link, you can’t just paste in any view. When you’re pasting an iframe you have to go to the text view. It doesn’t work outside of the text view because there’s just too much code associated with this for that to work.
Let’s hit update. Note that this 640 size that we choose is going to be wider than the content of this page and so, as you can see, it distorts it. What happens is it shrinks the video down but maintains the height.
Recommendation for Iframes
What I recommend that you do with iframes is you base your choice on the width of your Page. So since you know that your content is 474 pixels wide, what you’re going to do here is pick a custom size. Say 474 and it will automatically calculate the height and then you can copy it. Paste the iframe with the right size and hit update. Let’s view the page and now it’s the right dimension.
We are, of course, working in a specific theme here. But different themes behave differently. For example, if you’re working in Thesis and with one of my skins, Carta or Agility, a YouTube video embedded that way will be automatically responsive because it will respond to the image size. There are varying levels of responsiveness in responsive skins.
You can also embed an iframe video with Vimeo. Again, Vimeo has this height and width thing here, let’s see what happens when we put that in. Let’s edit the page and paste the iframe, view the page and take a look. Well, the video itself is shrinking to fit the space but the size of the embed is not adjusting. Its height is fixed even though its width is shrinking down.
In Vimeo if you want to change the embed size you can go to your video options and change it just like we did for the YouTube video. Then you just copy the new code and paste it the right size.
So the moral of the story is if you’re using the link embed method it doesn’t matter but if you’re using the iframe embed method then you want to make sure that you’ve used either YouTube’s or Vimeo’s method of calculating the height and width based on the content that you’re placing it in.