WordPress Hacks: Using Custom Fields to Auto-Embed YouTube Videos

If you only use videos once in a while on your WordPress-run site, this hack probably isn't of much use to you. But if you embed videos regularly, you probably get tired of copying and pasting the embed code all the time. Another possibility is that you want your in-post videos to show only on permalink pages, not on the home page. You can satisfy those and other functionalities by using WordPress custom fields and a little bit of HTML/ WP PHP code to control how and where your video shows up.

Sounds complicated, but if you have even a little bit of experience with coding in WordPress (a combo of HTML and PHP, with WP functions and sometimes JavaScript), then process is relatively simple. I'm assuming below that you have some experience in creating a custom field. (There's a snapshot below if you haven't.) Let's go through the first-time process:

1. From your WP admin panel, create a new post. Then create a custom field: "youtube_id". (Once you create the custom field, it will be available to all other posts, old or new.)
2. Assign to the youtube_id field the id of the youtube video that you want to embed. It's the value after the "watch?v=" in a YouTube URL. So if the url is http://www.youtube.com/watch?v=pxNGKICfi_g, the youtube video id is "pxNGKICfi_g". This is the value you'll enter (without quotations) into the custom field youtube_id.
3. Save the post.
4. Insert the custom code block (shown below) in your permalink template. Usually this will be in the single.php template file of your WP theme. Place the code where you need it. I like to place videos at the end of a post, but what you do will depend on your requirements.
5. Refresh your permalink (post) page and you should see the video embedded.

Those are the steps that you take the first time, for each unique custom field you create. The next time you want to use the same field in another post, you only need to do steps #2, 3 and 5.

The Technical Details

Here are the technical details for this process.

Creating a Custom Fields

Each time you create a custom field in WP, it will be available from other posts. If you've never done this before, just view the snapshots below.

Snapshot 1 (above): Create a new post and scroll down in the Write panel to the Custom Fields area. In the middle column, enter the name of the custom field you want to create. (In this case, youtube_id.) Then paste or type the field value for the post you are creating/ editing. (In this case, whatever youtube id you'd like. Remember not to enter the full URL of the video, just the id.)

Snapshot 2 (above): Click the "Add Custom Field" button and you'll see the field and its value added. This field name will now show up in the custom field drop down menu in the left column.

Custom Fields Code Block

You can create whatever custom fields you want, but without some PHP code to manipulate them, and HTML code to display them, you'll never see the results of the field values on your web pages. The code you need for the YouTube video embed is relatively simple:

<'?php if(get_post_meta($post->ID, 'youtube_id', true))

  {

    $values = get_post_custom_values("youtube_id");

    $youtube_id = $values[0];



?>





} ?'>

The first chunk, in PHP code, checks to see if the current post page has a custom field titled "youtube_id". If it does, then grab the value of the field, save it into $youtube_id, and substitute it into the HTML code chunk below. There are two places in the HTML chunk where $youtube_id is used. The result when that HTML code is rendered is the proper YouTube embed code.

To use this code in your WP site, copy from above and paste into it your single page template file (usually single.php). The video size is the default YouTube size of 425 px wide x 355 px high. You can change this, of course, simply by adjusting those numbers in the HTML code block (both locations). YouTube will then resize the video upon rendering.

Example

At Posters@Filmscenic, I've set up a single page with video embedded. To see a page without video, look at the Leatherheads snapshot below.

Now look at the snapshot of The Ruins page, below, which has a YouTube centered under the poster.

In the case of Posters@Filmscenic, I inserted the code into "the loop" in single.php, just before the ratings stars code. If you download a copy of my single.php, you can see where the code has been placed, just near the top of a loop of code.

Hopefully this is a sufficient example for you to do something similar. Give it a try, and if you still have questions, drop a comment here and I'll do what I can to answer.