Adding content from YouTube and similar sites

- Images are all well and good, but if you ask me, some of the coolest stuff on the web can be found in audio and video format, and chances are, when you find an awesome YouTube video or a SoundCloud file, you want to share it on your blog. Well, thanks to WordPress and a technology called oEmbed, this is easier than ever. Let's look at YouTube first. To add a YouTube video to your post, all you have to do is find the video on YouTube, copy the URL from the address bar, and paste it into your content editor. So here I have a new post that I've written, that talks about how we did product photography, and I also have a video from a lynda.com course where we talk about product photography.

So now I want to place this YouTube video inside my post. Like I said, I'll go and grab the URL here, copy it, and I go back to my post in my post editor, and place my cursor where I want the video to appear, and simply paste the URL in. And watch what happens. So I paste the URL in. WordPress will go, hmm, this looks like YouTube, and then it just adds the YouTube video. So now I have a playable YouTube video inside my editor, and I can click on it here and it plays, just like any other YouTube video would.

I can even click the edit button here and change the URL if I want to. You see I'm taken back to this Insert from URL panel that you saw in the previous movie. And this YouTube video will work exactly as you expect. So no embed code, no fancy anything, I just simply go and copy the URL from YouTube, dump it into my content editor, and it magically appears. And this AutoMagic adding based on a URL is not restricted to just YouTube. It also finds support in sites like Vimeo, SoundCloud, Twitter, Flickr, TED, and so on.

So anytime you find some live content on the web and you think, hmm, I would like to put that on my site, try to just copy the URL from whatever you are, and paste it in to your content editor and see if it just automatically pops up, because in many cases it will. Now, oEmbeds are awesome, because they do all the work for you, but they do take away some control, and in some cases it doesn't work, because the sites that you are pulling content from does not yet support oEmbed. In those cases, you can embed content manually. So let me just show you an example of that too.

At the bottom of my post here, I want to add a map to the location of my fictitious company. So what I've done is go to Google Maps and entered in the fictitious address to the fictitious company. So if you go to 100 South Main Street in Seattle, you will not find Age Plus Sport. It does not exist. Now that I have the map location, I'll go to the bottom right-hand corner here where I find that wheel icon, and click on it, and then I click Share or embed map. This gives me the option of a Share link, but in this case I want an Embed link.

And here I can choose between Small, Medium, Large, and Custom. I'm actually going to edit this. I'm not going to choose either size. I'll just take the default. Then I'll copy this URL in its entirety. Go back to WordPress, and here I have to switch from Visual to the Text view. Then I go to the bottom where I want my map to appear and I paste it in. So this is the code that will go to Google and grab the map and place it. And then I'll find this width attribute and change it from 600 to 100%.

This will ensure that the map is always 100% of the available space, and when you squish the page down onto a phone or something like that, it'll stay 100%. I unfortunately have to set a manual height, so I'm just going to leave that at 450 pixels. If I now switch back to the Visual view and scroll down, you'll see something that looks weird, but will eventually become the map right here. And then I can click Publish, and go and view the post, and if everything worked correctly, I'll have my playable video at the top, and if I scroll down, here we have the full functional map placed within the context of my post.

The great thing about using embeds like this is that you are not hosting these files. Instead, you're merely cutting a hole in your site and displaying YouTube or Twitter or SoundCloud or Google Maps in that hole. The downside is that if the service goes down, you'll just display an empty area on the site, but this is a rare occurrence. For most cases, using the embed feature is the right way to go, even, as you'll see in the next movie, you're adding your own videos.