A Couple More YouTube Tricks

Jul 28, 2009 17:29


After writing this article, I started paying more attention to the components that make up the YouTube embed code. So, after some experimentation, here are a couple more hints derived by Yours Truly. First of all, YouTube gives you nine different options for border/control bar colors, all of which are simply a darker and lighter version of the same color (dark green and light green, dark blue and light blue, etc.) However, you can specify any two colors you want, and YouTube will use those for the border (if you've enabled it) and the control bar - you just have to specify them in hexadecimal. For the example below, I chose a shade of red for the first color and a shade of blue for the second color. You can see in the code below where those colors are defined. If you want to choose a couple of colors that have some special significance to the movie you're playing, or if you just have a color scheme you like (perhaps you'd like the video borders to fit the colors used in your LiveJournal scheme?), then this is the way to do it.
YouTube also gives you only a limited number of choices for the dimensions of the video. If you want to choose a different size, for whatever reason, here's how you do it. First of all, for a standard letterbox-formatted video, like the one below, the ratio of the width to the height should be 4:3.¹ The video below will be presented at a resolution of 640x480, for example. However, if you look at the actual dimensions specified below (highlit in yellow), you'll see that the numbers used are larger. That's because you have to add 25 to the height, to provide room for the control bar, and then add an additional 20 to both the height and width if you have borders enabled (see the parts of the code highlit in green).
By the way, I remember seeing the video below when it was broadcast on TV for the very first time back in the 80s.² I've looked for it a few times on YouTube, but this is the first time I've found it. Watch it now, before they pull it down tomorrow for copyright infringement or something.

image Click to view


¹If the video you're embedding is in widescreen, then the ratio of the width to the height should be 16:9. The additional values required for the control bar and borders remain the same.
²Yes, I'm old.
EDIT: If you want the border around the video to be a single solid color, rather than two colors fading back and forth into each other, then all you have to do is set color1 and color2 to the same color, like so:

EDIT: Of course, with a little extra gratuitous HTML wrapped around the video, you can create effects like this.
EDIT from the FUTURE: Make sure that you change the 3 to 2 in all instances of ?version=3 (or &version=3 or &version=3) from the embed code to force YouTube to render the video in the older style if you want borders to appear (this comment was added in June 2012), as color borders do not display with the latest version of YouTube. If you're editing old LJ entries to correct them by adding &version=2 to the old embed code, make sure that you also delete the tags to force LJ to accept the altered YouTube parameters. (You have to do this any time you edit an LJ post with embedded video if you're making changes to the video embed code.) If you're adding borders to new YouTube videos (which don't have that option in the embed code), you need to add the color and border options to the code, and add 20 to the width and 45 to the height parameters.

html/css, colors, livejournal, videos

Previous post Next post
Up