slash25 code

  • Home
  • Work
  • Code
  • Github
  • WordPress Austin
  • Blog
You are here: Home / Uncategorized / Vimeo and Youtube iframe shortcodes
October 31, 2011 By Pat · Leave a Comment · (Updated: August 17, 2016)

Vimeo and Youtube iframe shortcodes

October 31, 2011 by Pat

I like how WordPress automatically coverts a Youtube url into a video embed, but I’m not really happy with the use of the embed tag. I like the newer iframe methods Youtube and Vimeo both use and I wanted a way to easily drop those into a Post or Page.

So I wrote two shortcodes to do this, one for Youtube and one for Vimeo.

Youtube shortcode

Start with the address (URL) of a Youtube video. For instance, say you’re watching this Youtube video: http://www.youtube.com/watch?v=aBnGbFjlhM0&feature=grec_index. You would copy everything from the left up to the ampersand (this-> &): http://www.youtube.com/watch?v=3s4Czla6tXc. 

This becomes the src attribute of your shortcode and you write this in your Post or Page:

[ youtube src=http://www.youtube.com/watch?v=3s4Czla6tXc ]

If you want to add a width and height attribute, you can add width and height like so:

[ youtube src=http://www.youtube.com/watch?v=3s4Czla6tXc width=600 height=450 ]

Tip: If you click on the Share button underneath the Youtube video, then again on Embed, you’ll see, in the embed code, the width and height of the video you’re watching.

Vimeo shortcode

Vimeo URLs are easier to work with, so far. They look pretty much like this: http://vimeo.com/31082448. Copy the address and it becomes the src attribute of your shortcode. Write it in your Post or Page:

[ vimeo src=http://vimeo.com/31082448 ]

If you want to specify a width and height, you can add those attributes like so:

[ vimeo src=http://vimeo.com/31082448 width=640 height=360 ]

Tip: To get the width and height of a Vimeo video, click on the embed link on the right side of the video player (mouse over the video to see these). Then click on the Customize embed options. Enter a width value and press the Tab key on your keyboard (or click on the height field). Vimeo will automatically calculate the correct height value for you. Use those for your width and height attributes in your shortcode.

Both shortcodes (with uStream support, too):

Tagged With: code, shortcodes, video

About Pat

I build custom WordPress themes to power your website. I believe your website should be easy to use. Contact me to learn how I can help.

copyright © 2020 slash25 code | privacy policy | pat on twitter