Advanced YouTube Video Embed

Advanced Video Formating

Ok, so you have a YouTube video that you want to put on the site. You can tweak video settings first from the YouTube video page. Go to the right of "Embeded" and click the gear looking image. You can choose the color of the video playbar and if you want a border.

For most videos, the best resolution is the highest resolution they offer which is 640x385 for a sample video. It pays to choose the larger format because it looks better. The only reasons to pick lower sizes is either the video quality is poor and choosing a larger resolution would distort the video, or you are using YouTube as a music player.

So, the advanced options for the embed code you copy into Wikidot:

HD YouTube Video Support

You add this code if you want the video to automatically be in HD when people play the video. It only works with videos that support HD. HD is not the same as HQ (high quality) and the code might not work for HQ (as far as I know).

For HD videos note that YouTube has added a "In HD" option under the embed window to do this automatically.

=%2526fmt%3D22

For HQ videos

&ap=%2526fmt%3D18

Here is an example of a YouTube video and where I added the code. I added the above code to the end of the YouTube video URL

[[embedvideo]]
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/eXEwDsssA94&hl=en&fs=1&color1=0x006699&color2=0x54abd6&ap=%2526fmt%3D22">

</param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/eXEwDsssA94&hl=en&fs=1&color1=0x006699&color2=0x54abd6&ap=%2526fmt%3D22"

 type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
[[/embedvideo]]

Breaking it down some more to make it very clear because it was confusing to see the code when I was implementing it:

<param name="movie" value="http://www.youtube.com/v/eXEwDsssA94&hl=en&fs=1&color1=0x006699&color2=0x54abd6&ap
=%2526fmt%3D22
....

</param><embed src="http://www.youtube.com/v/eXEwDsssA94&hl=en&fs=1&color1=0x006699&color2=0x54abd6&ap=%2526fmt%3D22"
=%2526fmt%3D22"

There would be no spaces in actual coding

  • For videos with borders, put the extra code before the border code. This means put the code before:
&border=1

Manually Changing Embedded Video Player Dimensions

If you look at the YouTube embed code, it has two options for size: height and width. You can change the dimensions to whatever you want. I would recommend that you keep the aspect ratio by increasing or decreasing each of the values by the same amount.

width="640" height="385"

I could increase both by 200 if I wanted:

width="840" height="585"

No Annotations in Embeded Player

Add this to the embed code. I just put it at the end of the embed source.

&iv_load_policy=3

Example:

<object width="425" height="344"<param name="movie" value="http://www.youtube.com/v/TPfBhR56940&hl=en&fs=1......

&iv_load_policy=3">



Starting the Youtube Video Anywhere Based On Time (seconds)

Add this to the embed code. I just put it at the end of the embed source (even after things like &hd=1 )

&start=164

This is for 164 seconds into the video. I don't know if there is a way to do it in minutes, so I do it this way.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License