Coming YouTube embed code changes may dramatically affect how YouTube videos work in WordPress. Here’s what to know—and what to do. All directions below are for self-hosted WordPress blogs, i.e. not on WordPress.com, but at your own domain.

UPDATE: If you’d like to handle YouTube with a lightbox plugin, WP-PrettyPhoto is a good choice.

Embed and resize your YouTube video

First you need to find or upload a video to YouTube. Then go to the video’s page on YouTube and click the “Embed” button underneath it. You’ll copy the YouTube embed code and paste it directly into the HTML tab in WordPress. You can just copy the code as is, or first choose or type in a custom width or a height and the code is automatically updated for you. Then you copy it from YouTube and paste it into WordPress. I’ll add a video shortly showing how to do this. Here’s a screenshot for now:


Align and wrap text around your YouTube video

The easiest way is add some “wrapper” code to the YouTube code you’ve pasted into WordPress. Just before the YouTube code (in WordPress HTML tab),  type <div> and just after type </div>. To make the video align to the left, and the text wrap around it to the right, simply change the <div> to <div class=”alignleft”>. The other options are <div class=”alignright”> and <div class=”aligncenter”> … pretty self explanatory 🙂

Set your YouTube video to autoplay

Here’s YouTube’s explanation for what you need to change: http://www.google.com/support/youtube/bin/answer.py?hl=en&answer=56107

Create a Video Thumbnail image

When you create a WordPress post that is primarily a video, you’ll want an image of that video to appear wherever your post is listed—preferably with a “play” button image in the middle of it so people see that they will be taken to a video. Here’s a simple way anyone can do that:

Important: How YouTube iframe code changes will affect WordPress

UPDATE: YouTube HAS done this, and as predicted, still offers a way to use the old embed code (circled in red in screenshot below):

YouTube has stated implemented they will be changing the default embed code for general users to an iframe format. This will make it easier for embedded videos to work on Apple products that don’t allow flash. But: WordPress has problems with iframe code (this also affects, for example, embedding Google Maps iframe code).

What can you do?

First, realize your existing code will continue to work (whew!). Second, YouTube will likely continue to make the embed-style non-iframe code available—just not by default. So all you need when they make the changeover is choose the HTML embed code instead of the iframe code. No word on how complicated this may or may not become.

What’s the problem?

When you place iframe code in the HTML tab on WordPress, everything works fine until you switch to the visual tab, and then WordPress breaks the code. WordPress is aware of this, and has specifically decided NOT to adapt WordPress to use iframe code. The WordPress ticket for this was closed with the explanation that iframes are “deprecated html” that shouldn’t be used anymore, and so it isn’t a WordPress problem.

A secret to keeping iframes working in WordPress

However, iframes WILL work in WordPress, but you MUST remember this trick: If you should accidentally find yourself in the “Visual” editing tab for a post or page that you have placed iframe code in, do NOT save!! Leaving the page, you may get a popup that says something like “The changes you made will be lost if you navigate away from this page.” Yes—lose them! Don’t save the changes. The “changes” are simply WordPress BREAKING your iframe code.

Afterwards, since WordPress will often take you to the last tab you worked in, go to the edit page for a DIFFERENT post or page (not one with iframe code) and choose the HTML tab. Then go to the page or post with iframe code. It should open in the HTML tab. If you needed to make any edits to the text or something other than the iframe code on that page, you can ONLY make them from the HTML tab. If you EVER go to the Visual tab—even if you don’t make any changes—and then save, your iframe code will be broken.

What I do also is copy all the code from the HTML tab of anything that has iframe code in it, and just save it as a text file on my computer. That way if there is ever an “accident,” I can just paste from my text file into the HTML tab of whatever was broken to restore it.