Bädda in Youtube spelaren med ändrad bredd, höjd och färg

2010-05-15

När jag byggde om layout till Nyhetsbloggen driftsatt på Google Blogger till två kolumner i höger och en del mindre förändringar i övrigt (ej avslutat) har tidigare inbäddade Youtube filmklipp blivit för breda så att de hamnar utanför inlägget. Det går dock att andra och förklaras hur samt hur färgen på Youtube-spelare kan ändras.

Ändra bredd på inbäddad Youtube-spelaren

Youtube sätter en i förväg angiven bredd på filmklippen och den behöver inte passa alla. I Youtube finns några färdiga alternativ att välja mellan efter att du som vanligt klickat på knappen markerad <Bädda in>. Du ser nu inställningarna för inbäddningen i bilden:

Under inställningarna för färgerna finns rutor vars storlek indikerar hur respektive inställning förhåller sig i "verkligheten" jämfört med varandra. Genom att klicka på en får koden den storlek som är angiven ovanför i siffror.

Fortfarande kan man önska ändra storleken till något annat än de fyra alternativen. Det är väldigt enkelt att göra och är bara att ändra siffrorna manuellt i HTML-koden. Nedan är dessa gjorda kursivt:

<object width="480" height="385"><param name="movie"
value="http://www.youtube.com/v/uTfbCOPApsQ&hl=sv_SE&
fs=1&color1=0xe1600f&color2=0xfebd01"></<param name="allowFullScreen"
value="</param><param name="allowscriptaccess"
value="always"></param><embed
src="http://www.youtube.com/v/uTfbCOPApsQ&hl=sv_SE&fs=1&
color1=0xe1600f&color2=0xfebd01" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="480"
height="385"
></embed></object>

Vad man behöver tänka på är att ha rätt proportion mellan bredd och höjd. Dessa ska vara enligt:

Bredd / Höjd ≈ 1.24

Att de avviker något gör ingenting. Vill du nu ha en bredd som är t.ex. 700 blir höjden:

Höjd = Bredd / 1.24 = 700 / 1.24 = 564.516129 ≈ 565

Vill du ha höjden 150 och ska beräkna bredden blir denna:

Bredden = höjden * 1.24 = 150 * 1.24 = 186

För bilder brukar det gå bra att endast sätta bredden som procentsats så skalas höjden så att den bibehåller samma proportion till bredden om inte annat angivits för denna. Det fungerar inte (för mig i Google Chrome) för den inbäddade spelaren. Bredden skalas korrekt och sätts till motsvarande längd av "den del" av sidan spelaren är på t.ex. ett inlägg.

För höjden gäller det att denna antingen måste anges explicit med siffror eller också den via procentsats. Sätts den som procentsats blir resultatet enligt motsvarande andel för inläggets höjd vilket gör det oerhört svårt att passa in med bredden.

Ändra färg på Youtube spelaren

Det finns flera färdiga alternativ att välja mellan när man bäddar in spelaren. Vill man välja ett annat än i förväg angivet (vad du senast valt eller om du aldrig valt den grå varianten).

Vill man ha en annan färg ska det enligt YouTube Embedded Player Parameters - Colors i dokumentationen i Google Codes för API till spelaren gå att förändra (för Youtube diskuteras det längre ner) via:

"color1, color2
Values: Any RGB value in hexadecimal format. color1 is the primary border color, and color2 is the video control bar background color and secondary border color."

Det avser emellertid inte självklart webbsajten Youtube utan API till webbtjänsten Youtube som den ses för systemutvecklare. Allt i standarden behöver inte vara implementerad i varje lösning som ger kod. För färgerna fungerade det med de jag prövade att ändra till.

För att hitta att ersätta standardfärgerna kan t.ex. följande tabell användas:

The Other RGB Color Chart | Tayloredmktg.com

För färgen du vill använda kopierar du värdet angivet i kolumnen HEX #. Det värdet ersätter du värdena redan angivna med och i exemplet nedan för tecknen gjorda kursivt: (behåll 0x):

<object width="480" height="385"><param name="movie"
value="http://www.youtube.com/v/uTfbCOPApsQ&hl=sv_SE&
fs=1&color1=0xFF6600&color2=0x0000CC"></<param name="allowFullScreen"
value="</param><param name="allowscriptaccess"
value="always"></param><embed
src="http://www.youtube.com/v/uTfbCOPApsQ&hl=sv_SE&fs=1&
color1=0xFF6600&color2=0x0000CC" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="480"
height="385"></embed></object>

Ett exempel

Nedan har vi ett exempel där filmspelaren fått bredden 200. Höjden beräknades med 200/1.24 och avrundades till 161.

Kanten på spelaren fick den nästan vita färgen ffafa medan tangenterna fick bli 5f9ea0.

Det färdiga resultaten har vi nedan:

Mer om Youtube

Fler guider och tips om Youtube:

Multimedia i tidningar på nätet | Nyhetsbloggen
Youtube för lansering av tidningar, bloggar och magasin | Nyhetsbloggen
Skicka bulletiner till Youtube prenumeranter (följeslagare) | Nyhetsbloggen
Socialdemokraternas strategi för trafik på nätet | Nyhetsbloggen
Videokameran Flip Mino HD bra för tidningar och bloggar | Nyhetsbloggen
Spännande framtida applikationer för Youtube | Nyhetsbloggen
| Nyhetsbloggen

Att använda filmklipp hittade på Youtube inbäddade med spelaren är ett sätt att illustrera inlägg - eller bygga en hel nyhet eller inlägg på - men fler möjligheter finns och många tips hittas via:

Illustrera - Introduktion | Nyhetsbloggen

Resurser om Youtube (officiell blogg m.m.) och sociala nätverk hittas via:

Sociala nätverk och media | Nyhetsbloggen