The most personalized Youtube embedded player

by youkus on 2008-11-19 13:26:43

Many blogs frequently embed YouTube videos, and in most cases, we simply copy the video's embed code and paste it into our blog's code. YouTube's default customization options for embedding only include two functions: whether to add related videos and whether to add a border.

In reality, we can do much more. By modifying the embed code, we can easily customize the player to suit our preferences, even transforming it into a music player bar. To understand this, you first need to know the meaning of each tag in the embed code.

A basic YouTube embed code looks like this:

```html

```

Modify this parameter line:

`http://www.youtube.com/v/Yx9FgLr9oTk&hl=zh_CN&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1`

Below are the meanings of these parameters:

1. **rel**

Related videos. Value is 0 or 1, default is 1. Setting it to 1 will display related videos after the current video finishes playing.

2. **autoplay**

Auto-play. Value is 0 or 1, default is 0 (disabled). Add `&autoplay=1` to the URL to enable automatic playback of the video.

3. **loop**

Looping. Value is 0 or 1, default is 0 (no loop). Add `&loop=1` to the URL to enable looping playback of the video.

4. **disablekb**

Keyboard shortcuts. Value is 0 or 1, default is 0 (enabled). Add `&disablekb=1` to the URL to disable keyboard shortcut operations for the player.

Specific shortcuts: Spacebar - Pause/Play, Left arrow - Rewind, Right arrow - Fast forward by 10%, Up/Down arrows - Adjust volume.

5. **border**

Border. Can only be 0 or 1, default is 0. Setting it to 1 will make the player show a border, and the border color can be customized using the following two tags.

6. **color1, color2**

RGB hexadecimal parameters. `color1` is the base color of the border, and `color2` is the secondary color of the play bar and border. In fact, these color codes can be selected with a mouse in YouTube's embed options.

7. **start**

Start point. This is a very useful parameter. Sometimes we don't want the video to start from the beginning; perhaps starting at the 55th second. The `start` tag is used to set the initial playback time of the video. For example, adding `&start=55` to the URL will make the video start playing at the 55th second.

8. **fs**

Controls whether the full-screen button is displayed. Value is 0 or 1, default is 0. Setting it to 1 will display the full-screen button on the player. To use this parameter, the following lines in the embed code are necessary:

```html

allowfullscreen="true"

```

9. **fmt**

Video format. Currently, when the video has a high-definition version, setting `fmt=6` makes the video play in HD, and setting `fmt=18` makes the video play in its original size if it has an HD version.

10. **width, height**

These are the width and height of the embedded video window, measured in pixels. Using these two parameters, we can disguise the video player as a music player bar. When you only want the audio and not the video, you can set `height` to 24, which is exactly the height of the play bar.