Underground Film Journal
More » Underground Film News

Film Blogging: Embedding The New YouTube & Vimeo On WordPress

Vimeo and YouTube logos

Traditionally, the WordPress blogging platform has shunned the use of iframes to embed content into posts and pages, even for self-hosted websites using the program, e.g. the Underground Film Journal. But, that’s a problem these days as most websites with embeddable content, such as YouTube and Vimeo, are now using iframe code as the main means of promoting their wares.

Iframes are little snippets of content that one can use to display content from other sites. Since WordPress likes to promote itself as a blogging platform that just about anybody can get up and running with minimal effort and technical know-how, it’s understandable why they’ve been anti-iframe. Anybody who’s tried to embed Iframes into WordPress blog posts using the program’s visual editor, will have seen those iframes automatically stripped out.

While iframes are great for displaying legitimate embeddable content, they’re also a great method for hackers to shut your website down. All a hacker has to do is hide one of their bogus iframes anywhere on your blog and flood it with constantly auto-generated content. Then, your server will shut down from too much activity. So, from WordPress’ perspective, stripping out iframes as a way to protect the not-technically inclined blogger makes sense. (And, personally, I concur.)

However, these days, iframes can’t be ignored since so many services offer their use to display their content: Google Maps, Flickr, Slideshare and tons more. And, of course, the two most popular video sharing services have begun using iframe code. Vimeo was the first and YouTube shortly followed.

Although Vimeo and YouTube still offer the use of their old, object-oriented embed code, it would be nice to use their new iframes on WordPress since that’s the way the web is heading. Also, that new iframe code makes it possible for Vimeo videos to appear on mobile devices, such as Apple’s devices, iPhone, iPod, iPad.

So, you’re in luck! There are two methods to get YouTube and Vimeo iframes to appear on a self-hosted WordPress blog. The first method is for the non-technical blogger and the other is for the more advanced.

Method #1: Jetpack

Recognizing the growing use of iframes, WordPress has developed an official plugin called Jetpack that allows for their use from several trusted sources, including both YouTube and Vimeo. And, it’s super easy to use. I know because I’ve been using it the past couple of weeks.

WordPress Plugins Admin Link

To get Jetpack, click the “Add New” link under “Plugins” in your WordPress admin sidebar. Then, in the Search field, just run a search for “Jetpack” and the first result that comes up should be “Jetpack by WordPress.com.” Just go ahead and install and activate it.

Once activated, you now have a whole host of new features developed by WordPress, including the use of Shortcode Embeds, which is what will pull your YouTube and Vimeo iframes. A “Shortcode” is a handy shortcut WordPress has developed that you can plug into any blog post and page that will automatically pull up any specialized code you need.

Jetpack Shortcode Embeds

On the Jetpack admin screen, click on the icon for Shortcode Embeds to see which shortcodes you can use. Among the list, you should see both YouTube and Vimeo options. To see how to use their Shortcodes, click their site names for full official WordPress instructions, but really they’re as easy to use as inputting the URL of whatever video you want to embed into your post.

For example, inputting this Vimeo URL into a post:

http://vimeo.com/20425004

Will generate this video:

(By the way, even though I’m using Jetpack, I know a special way to get the Vimeo URL to display without having the video pop up. However, to get that video to pop up, I literally just inserted the URL without any special trick into this post.)

However, if you want special control over the display of your videos, there are additional shortcode tricks to use. For example, to make that video display smaller, I can set height and width restrictions. For example, this shortcode:

[vimeo http://vimeo.com/20425004 w=100&h=56]

Will generate this video:

Method 2: Using WordPress Custom Fields

This second method I REALLY don’t recommend unless you are a) As absolutely sure as possible that you know what the hell you are doing; and b) You are willing to take the risk that you’re potentially opening your blog up to a whole host of problems.

So, with that, here’s what you do:

Self-hosted WordPress sites automatically come with a method of inserting content into posts that the visual editor traditionally strips out. That method is the Custom Field and, basically, you’re going to be creating your own shortcode to handle an iframe without using Jetpack.

On every WordPress blog post editing screen, there’s an area for adding a Custom Field, which is an area into which you can insert any kind of text or website code that you want. Then, all you need to do is add a special line in the main blog post editing screen that pulls up that Custom Field’s text or code.

(Side note: Custom Fields can also do a whole heck of a lot more than this, but I’m sticking to just this usage.)

But, there’s a catch: You need to create a special function that will link a blog post editing screen with its Custom Field.

This function is going to lie in your live WordPress theme files. If you’re a fairly skilled theme editor, this isn’t that difficult. But, if you don’t know what you’re doing, again I advise to not mess with your theme files because you can really screw things up.

If you’re brave, go into your theme’s editor via the admin sidebar. In the theme editing section, find the file called “Theme Functions.” In the “Theme Functions” editing screen, you need to input this block of code:

function field_func($atts) {
global $post;
$name = $atts['name'];
if (empty($name)) return;
return get_post_meta($post->ID, $name, true);
}
add_shortcode('field', 'field_func');

(By the way, I got that function from this website.)

Now, go write a blog post. Underneath the editing screen, find the area for custom fields and click “Enter New.” Create a new name for your new Custom Field, then enter your YouTube or Vimeo iframe code into the box marked value.

Lastly, go up to your editing screen and input a shortcode that looks like this:

[field name=name-of-your-custom-field]

Obviously, replace the “name-of-your-custom-field” with the actual name you came up with for your Custom Field.

Since I’m not using this method, I can’t show you an example, but I’ve tested it and it works.

My Personal Conclusion

While I’m personally not a big fan on relying on too many plugins to handle special issues, the Jetpack solution works really well and one can think of it as a WordPress core function since they developed and are maintaining it. So, I really recommend using that over hacking your theme files because that can get messy.


Underground Film Feedback (1 comment)

Sorry, no new comments allowed, but please read through our comment archive.

Post Your Comment

Your email address will not be published. Required fields are marked *