To play YouTube Video, we can use the standard Google Gadget from Google Sites, a generic Flash Gadget or a specific Google Gadget.
A first example, Clip for Swiss Wines
Using the standard Video Gadget of Google Sites, we can configure the Player. Just Edit HTML and change the value of the origsrc attribute. When you define the Video you enter :
The origsrc attribute contains the cryptic code of the video :
Gro2Y-pJKAk
We can add some parameters of the YouTube Player :
&border=1 1 for a border
&color1=0xrrggbb Any RGB value in hexadecimal format. The primary border color
&color2=0xrrggbb Any RGB value in hexadecimal format. The video control bar background color and secondary border color
&showsearch=0 0 disables the search box. To enable the search box, rel must be active
&rel=1 1 for the player to load related videos once playback of the initial video starts
&autoplay=0 Whether or not the initial video will autoplay when the player loads
For the example above, I use these values :
origsrc="Gro2Y-pJKAk&showsearch=0&border=1&color1=0x5d1719&color2=0xcd311b"
A second example : Watching the Video in High Quality
We need to watch the famous Dance Video in high quality. The following table summarize the options available with YouTube :
Normal : 320 x 240 320kb/s
High : 480 x 360 605 kb/s fmt=6
ipod Quality : 480 x 360 602 kb/s fmt=18
Very High Quality : 1280 x 720 2000 kb/s fmt=22
Badly, the parameter fmt is only valid to directly watch a YouTube using an address like this : http://www.youtube.com/watch?v=zlfKdbWwruY&fmt=22
With the standard Google Gadget for YouTube, we need to URLencode the parameter like this :
&ap=%2526fmt%3D22
We finally get the following result. On the left the standard quality, on the right the High Quality :
|
|
|
Using a Generic Flash Player
We can use this generic Flash Player, to play a youTube video, to be able to change the size of the window :
If we need to allow fullscreen option, we need to use another player, containing the allowfullscreen value :
The sizes used by YouTube :
425 x 264
480 x 295
560 x 345
640 x 385
848 x 500
I choose the last one to display the Dance Video, in High Quality. As File parameter of the gadget I use these values (without carriage return) :
http://www.youtube.com/v/zlfKdbWwruY
&ap=%2526fmt%3D22
&showsearch=0
&hl=en
&fs=1
&border=1
&color1=0x5d1719
&color2=0xcd311b
&ap=%2526fmt%3D22
&showsearch=0
&hl=en
&fs=1
&border=1
&color1=0x5d1719
&color2=0xcd311b
As I add fs=1 (full screen option), I use the gadget : flash_container_fs.xml
The parameters :
Video : The id of the Video
Size : Pixels, 223 x 142, 425 x 264, 480 x 295, 560 x 345, 640 x 385, 848 x 500 (with 223 x 142 border is no)
Colors : light gray, black gray, blue gray, blue, green, orange, pink, purple, red (reader and border)
Border : yes or no
Search : Search form, yes or no (yes only if Similar is yes)
Similar : Similar Video at the end, yes or no
Auto : Auto start, yes or no
Quality : Normal, High, High (iPod), Very High
Plein : yes or no, allow full screen
BoxBcol : #rrggbb background color of cointainer
Video : The id of the Video
Size : Pixels, 223 x 142, 425 x 264, 480 x 295, 560 x 345, 640 x 385, 848 x 500 (with 223 x 142 border is no)
Colors : light gray, black gray, blue gray, blue, green, orange, pink, purple, red (reader and border)
Border : yes or no
Search : Search form, yes or no (yes only if Similar is yes)
Similar : Similar Video at the end, yes or no
Auto : Auto start, yes or no
Quality : Normal, High, High (iPod), Very High
Plein : yes or no, allow full screen
BoxBcol : #rrggbb background color of cointainer
Using this gadget, with high quality, allow full screen and blue color :
Tips : How to retrieve the thumbnail of the video
We just need to have the id of the video :
http://www.youtube.com/watch?v=zlfKdbWwruY
The thumbnail is given by this address :
http://img.youtube.com/vi/zlfKdbWwruY/default.jpg
More informations
Find Wines