Update: new, improved explanation.

I'm no computer tech nerd. My web skills are really quite basic, gained largely through trial & error and by clicking "view page source" on web pages with interesting features. But I'm a fiddler and a tinkerer, so I can seldom just leave a newly-discovered function alone without customizing it. That's not always a good thing. I've messed up a lot of perfectly good code by trying just one more modification. Sometimes though, I have a genuine "Eureka!" moment when I figure out something really good. Today, I want to share one of those "Eureka!" moments. The techies out there will be mostly unimpressed, but perhaps some of you will find this useful.

I don't like sending readers to sites with questionable content. For that reason, I prefer to embed YouTube videos rather than link to YouTube. However, embedded videos are one of the things that can cause your page to load slowly. Also, they clutter up the appearance of the page. I therefore wanted to make the video open alone in a popup window.

First, I scavenged the code frome a page containing a popup image. In this case, it was from my own site. (Movable Type allows you to choose "popup" or "embedded" when uploading a file, and writes the code for you, so yes, I had done it before without knowing how.) Then I trimmed out the attributes I didn't need, such as scrollbars and the like. I then simply replaced the file URL with the YouTube video URL. This will not be the URL found in the address bar or to the right of the video on the YouTube page. It will be the URL found in the "embed" code directly below that, highlighted in red in this image. YouTube will not let you copy just the URL out of the "embed" code, so you will have to copy & paste the entire "embed" code and then copy the URL into your popup code. Just right-click on the "embed" code and click "copy." Then paste it into your blog post or any document. It will look like this:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/yBsGFAXw6d4"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/yBsGFAXw6d4" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

The URL is the part in red type, and is the only part you will keep. Delete the rest. The code you need, with the URL copied from the code above, looks like this:

<a href="http://www.youtube.com/v/yBsGFAXw6d4" onclick="window.open('http://www.youtube.com/v/yBsGFAXw6d4','popup', 'width=425, height=350'); return false">Where I learned My Computer Skills</a>

. . . and here's how it works:

Where I learned My Computer Skills

Now, here's another trick to give you further control over your content, this one thanks to the Desiring God blog. YouTube videos are automatically followed by a menu of related videos that you may or may not want appearing on your site. You can eliminate them by simply adding &rel=0 to the URL, like this:

http://www.youtube.com/v/yBsGFAXw6d4&rel=0

Finally, you can adjust the size of the video display by changing the width & height attributes, or go to full screen by simply omitting them. However, most YouTube videos are not of high enough resolution to display at full screen.

As I said, techies will be generally unimpressed with this, but my little brain thinks this is very cool. I hope someone finds it useful.