Using the WordPress embed shortcode for YouTube, Vimeo, more

This was going to be a post on building a WordPress shortcode that you’d use like [youtube]http://www.youtube.com/watch?v=url[/youtube] inside your posts to take care of the embedding.  My experience has been that when you flip over to HTML view to paste your code and then flip back to the Visual editor to finish your post, a lot of the embed code gets lost as the TinyMCE editor tries to “fix” what it sees as bad or invalid code.  I’ve always overcome this myself by putting in some placeholder text, like al;dkjflkjsflkdj, doing the rest of my post, and then replacing that with the embed code in HTML view and posting.  A shortcode would make things easier and take out a lot of the unnecessary hassle.

Turns out, they’re one step ahead of me.

Starting in 2.9, WordPress implemented the shortcode.  What this means is that you can wrap a YouTube or Vimeo url in url tags and WordPress will take care of the code part automagically.  You can even enter the url without the tags (if you put it on its own line, like so:

http://youtube.com/yourvideo

That’s great, but what if you’re a control freak and want to specify the size of the embed?  WordPress has got you covered there, too.  Scroll down to Settings and click on Media.  You’ll see this:

wordpress media 750x446 Using the WordPress embed shortcode for YouTube, Vimeo, more

Here you can set the max height and/or width it will default to when it creates the embed code.  You can also disable the function to automatically try to create an embed for plain text urls.

Does it work with everything?  No.  For security reasons, they’ve limited the sites they create the embed for to a white list of approved sites.  But chances are, if you’ve thought to embed it, they’ve got you covered.  A complete list is on the WordPress Codex page for Embeds.  Is it perfect?  No.  In particular, I’ve noticed Vimeo doesn’t always scale according to what you set in the Media Settings.  Still, for what it does, it’s pretty awesome.  Especially if you’ve been doing it the hard way all this time.

Now, you can still create a [youtube] shortcode if, for example, you wanted to simplify things one step further and do something like [youtube id=LwJj3STVKZI].  You can head over to Creating Simple oEmbed-Based WordPress Shortcodes on Viper007Bond if you want to get your hands dirty and play around with that.

What’s it look like?  Well, it looks a little like this:


Posted

in

by