Embedding Youtube-Videos - custom size and colors

Aug 21, 2010 00:59

For those, who don't know that you can change the size and colors of an embedded YT video:

I only pick the easy stuff for now, something you can use here on LJ too. There's more you can do with embedded videos, but that's JavaScript stuff x_X

Hm, okay, I just wanted to take a screenshot of the options YT offers and noticed, that they made a tool for picking your own sizes. It automatically calculates the right 16:9 proportion in pixels.
It's really useful when you embed it into your fixed layout and want it to take up the entire width. I did this here for example (at the bottom).
Okay, since YT took care of the size, only the colors are left.

What Youtube offers us thus far:


It covers all the important colors, but no option to pick your own colors. Maybe this will follow in the future, just like the custom video size.

How can I change the color?
First I pick one of the color option, so that it adds the color parameters to the code.
Not picking colors gives it the default style and no color parameters are defined in the code:


The size and colors are declared TWO times in the code, so it's necessary to change both. Doesn't work otherwise.

What's a hexcode? It's a html color name with 6 characters.
FFFFFF for example is white.
000000 is black (0 = zero, it looks like a letter in my style orz)

ef4771
0daeae
24ae0d etc etc

You can copy the hexcode from every graphic program:


Let's alter the code with other hexcodes
Note that you can define two different colors, color1 and color2. Two colors at two places, so you have to paste 4 hexcodes altogether:


Now let's see how it looks like:


color1:
ef4771 = border

color2:
0daeae = rest

It's really easy, if you don't get confused by the long-ass code that makes you want to look away, because it makes you dizzy @_@
By removing the checkmark at "include related videos", the code get's shorter.

web design, tutorial, youtube

Previous post Next post
Up