How to Post Embedded YouTube Videos
Posted: Sun Sep 12, 2010 5:31 am
INTRODUCTION
Here is a hyperlink to YouTube.com’s Embedded Player Style Guide.
http://www.google.com/support/youtube/b ... wer=178264
The guide linked to above tells about embedding a video in a web page. I would say it tells you how to do so, but in some ways it does not do that. For example, the guide lists values such as “rel†which controls whether or not related videos are listed once your embedded video concludes. But the guide does not fully explain how to write these values into your code. Also, that guide is intended for those who are coding web pages, not people who are posting messages to a message board, for which instructions would be different.
This guide will tell you how to post an embedded video in a message at the Driver Madness Network forum. This guide also provides other related information, but the pertinent information will be posted first, for those who want that immediately, and the rest will only come after business has been taken care of.
INSTRUCTIONS BEGIN HERE
In examples provided below 'youtube' will become 'mootube' to prevent the expression of code segments.
When you are composing a message to post to the Driver Madness Network forum, you will see a button among the available tools called ‘youtube’. If you click that button, two tags will appear [youtube] [/youtube] in the message you are composing. Between those two tags you can paste the bit that tells which video is being embedded and apply values to customize your embedded video player. You can also type the tags yourself, the same as any other tags. Again, they look like this: [youtube] [/youtube]
Do not paste in the entire URL (web address) for the web page where your video is. Instead, only paste in the part of that address which refers to the video itself. That is everything after the equal (=) sign and before the “&†symbol (if related videos are indicated in the URL). Here is an example of a web page address for a video at YouTube.com, showing what you do and do not paste into your embedded video code.
http://www.mootube.com/watch?v=8h9XMyeKwjg&feature=related
CUSTOM PLAYER SIZE
The official guide says there are four player sizes for embedding YouTube videos. It adds that the default (and recommended) embed size is 480x385 for a 4:3 video and 640x385 for 16:9 content. And then it goes on to say that you can also choose a custom size instead. So, why does it start off by saying there are four sizes to choose from? How would I know?
One important thing to remember when choosing your own custom dimensions for an embedded video is that the YouTube controls need to be considered. Once you have decided on the resolution (width and height dimensions) of your embedded video, add 25 to the height to accommodate the YouTube control bar that will be displayed across the bottom.
To customize the size of your embedded YouTube video add “size=640x385†to your first tag substituting whatever numerical values you wish to use. Here is what that looks like.
[mootube size=640x385]8h9XMyeKwjg[/mootube]
OTHER KINDS OF CUSTOMIZATION
Adding values that customize your embedded video player in other ways is simple. Each value is accompanied by a parameter that tells what effect the value will have on the appearance and function of your embedded video player. These values and their parameters are placed immediately after the video ID segment of your code, beginning with a question mark “?†with no spaces before, within, or following these value codes. You may use only one value or include several. Each value and its parameter is separated by a “&†symbol. It will look like this.
[mootube size=640X505]CHLn55LwH7k?fs=1&rel=0&border=1&color1=4000BF&color2=FF0040[/mootube]
Here are what those values are. Default settings require no value to be included.
To see your player before submitting your message, click the ‘Preview’ button.
Here are the results for the example embedded player code provided above.
[youtube size=640X505]75upNp-cRgg?fs=1&rel=0&border=1&color1=ff0040&color2=4000bf[/youtube]
A player with only a color1 value looks like this:
[youtube size=640X505]75upNp-cRgg?fs=1&rel=0&border=1&color1=40000bf[/youtube]
A player with only a color2 value looks like this:
[youtube size=640X505]75upNp-cRgg?fs=1&rel=0&border=1&color2=40000bf[/youtube]
That is basically all there is to it.
CALCULATING DIMENSIONS
If you want to use custom dimensions when embedding a video to a web page at Driver Madness Network, but you do not know how to do conversions, try entering a query of “ratio calculator†into a search engine of your choice. You will probably see results for web pages that will offer JavaScript machines to do your math equations for you.
Below are hyperlinks to two such web pages. The first one is better because it provides an image of a rectangular box that changes shape in real time to demonstrate the aspect ratio you have entered into the dimension dialog boxes.
http://andrew.hedges.name/experiments/aspect_ratio/
http://www.continuum2.com/js_ratio.php
COMMON DISPLAY SIZES
Here are some commonly used aspect ratios, the dimensions of which you can refer to when choosing to embed a video on a web page. Remember to add 25 to the height for YouTube controls.
4:3 aspect ratio dimensions (analog TV / monitor, iPad):
320x240, 480x360, 640x480, 800x600
3:2 aspect ratio (iPod Touch, Game Boy Advance):
480x320, 720x480, 900x600
16:9 aspect ratio (HDTV, Sony PSP):
480x270, 640x360, 960x540
These aspect ratios are actually pseudonyms. For example, 4:3 is really the rough equivalent of the industry standard 1.33:1. And the technical specification for 16:9 is actually 1.78:1. If you would like to see more about aspect ratios and their history in the computer and film industries, please take a look at the pages linked to below.
ADDITIONAL INFORMATION ABOUT DISPLAY STANDARDS
Computer Industry
This page lists some current standards for computer display resolutions, showing what is high definition. This page also provides statistics showing in percentages the numbers of people who use each type of display settings online in general and among Steam subscribers, according to surveys.
http://en.wikipedia.org/wiki/Display_resolution
This page lists commonly used resolutions by product and manufacturer, from little phones to the big stuff.
http://en.wikipedia.org/wiki/List_of_common_resolutions
This page has a very nice table listing display standards throughout the history of the computer age.
http://en.wikipedia.org/wiki/Computer_display_standard
Motion Picture Industry
This page shows very good screenshot images depicting the aspect ratios of some of history’s most famous feature films.
http://www.dvdaust.com/film_formats.htm
This web page uses blank rectangular images and brief summaries to offer a very comprehensive overview of that same history.
http://www.widescreen.org/aspect_ratios.shtml
And this article at How Stuff Works.com explains the history of aspect ratios in a concise way, giving the reader the gist of things in layman’s terms without going on and on about it all.
http://entertainment.howstuffworks.com/ ... ormat2.htm
Here is a hyperlink to YouTube.com’s Embedded Player Style Guide.
http://www.google.com/support/youtube/b ... wer=178264
The guide linked to above tells about embedding a video in a web page. I would say it tells you how to do so, but in some ways it does not do that. For example, the guide lists values such as “rel†which controls whether or not related videos are listed once your embedded video concludes. But the guide does not fully explain how to write these values into your code. Also, that guide is intended for those who are coding web pages, not people who are posting messages to a message board, for which instructions would be different.
This guide will tell you how to post an embedded video in a message at the Driver Madness Network forum. This guide also provides other related information, but the pertinent information will be posted first, for those who want that immediately, and the rest will only come after business has been taken care of.
INSTRUCTIONS BEGIN HERE
In examples provided below 'youtube' will become 'mootube' to prevent the expression of code segments.
When you are composing a message to post to the Driver Madness Network forum, you will see a button among the available tools called ‘youtube’. If you click that button, two tags will appear [youtube] [/youtube] in the message you are composing. Between those two tags you can paste the bit that tells which video is being embedded and apply values to customize your embedded video player. You can also type the tags yourself, the same as any other tags. Again, they look like this: [youtube] [/youtube]
Do not paste in the entire URL (web address) for the web page where your video is. Instead, only paste in the part of that address which refers to the video itself. That is everything after the equal (=) sign and before the “&†symbol (if related videos are indicated in the URL). Here is an example of a web page address for a video at YouTube.com, showing what you do and do not paste into your embedded video code.
http://www.mootube.com/watch?v=8h9XMyeKwjg&feature=related
CUSTOM PLAYER SIZE
The official guide says there are four player sizes for embedding YouTube videos. It adds that the default (and recommended) embed size is 480x385 for a 4:3 video and 640x385 for 16:9 content. And then it goes on to say that you can also choose a custom size instead. So, why does it start off by saying there are four sizes to choose from? How would I know?
One important thing to remember when choosing your own custom dimensions for an embedded video is that the YouTube controls need to be considered. Once you have decided on the resolution (width and height dimensions) of your embedded video, add 25 to the height to accommodate the YouTube control bar that will be displayed across the bottom.
To customize the size of your embedded YouTube video add “size=640x385†to your first tag substituting whatever numerical values you wish to use. Here is what that looks like.
[mootube size=640x385]8h9XMyeKwjg[/mootube]
OTHER KINDS OF CUSTOMIZATION
Adding values that customize your embedded video player in other ways is simple. Each value is accompanied by a parameter that tells what effect the value will have on the appearance and function of your embedded video player. These values and their parameters are placed immediately after the video ID segment of your code, beginning with a question mark “?†with no spaces before, within, or following these value codes. You may use only one value or include several. Each value and its parameter is separated by a “&†symbol. It will look like this.
[mootube size=640X505]CHLn55LwH7k?fs=1&rel=0&border=1&color1=4000BF&color2=FF0040[/mootube]
Here are what those values are. Default settings require no value to be included.
- fs=1: Enable full screen viewing without having to leave the forum topic page to view the video at YouTube.com.
rel=0: Do not show related videos. (No value is needed to show related videos, which is the default setting.)
border=1: Display a border around the embedded video. (No border is the default setting.)
color1=4000BF: Specify one of two available colors, in this example a blue color.
color2=FF0040: Specify one of two available colors, in this example a red color.
To see your player before submitting your message, click the ‘Preview’ button.
Here are the results for the example embedded player code provided above.
[youtube size=640X505]75upNp-cRgg?fs=1&rel=0&border=1&color1=ff0040&color2=4000bf[/youtube]
A player with only a color1 value looks like this:
[youtube size=640X505]75upNp-cRgg?fs=1&rel=0&border=1&color1=40000bf[/youtube]
A player with only a color2 value looks like this:
[youtube size=640X505]75upNp-cRgg?fs=1&rel=0&border=1&color2=40000bf[/youtube]
That is basically all there is to it.
CALCULATING DIMENSIONS
If you want to use custom dimensions when embedding a video to a web page at Driver Madness Network, but you do not know how to do conversions, try entering a query of “ratio calculator†into a search engine of your choice. You will probably see results for web pages that will offer JavaScript machines to do your math equations for you.
Below are hyperlinks to two such web pages. The first one is better because it provides an image of a rectangular box that changes shape in real time to demonstrate the aspect ratio you have entered into the dimension dialog boxes.
http://andrew.hedges.name/experiments/aspect_ratio/
http://www.continuum2.com/js_ratio.php
COMMON DISPLAY SIZES
Here are some commonly used aspect ratios, the dimensions of which you can refer to when choosing to embed a video on a web page. Remember to add 25 to the height for YouTube controls.
4:3 aspect ratio dimensions (analog TV / monitor, iPad):
320x240, 480x360, 640x480, 800x600
3:2 aspect ratio (iPod Touch, Game Boy Advance):
480x320, 720x480, 900x600
16:9 aspect ratio (HDTV, Sony PSP):
480x270, 640x360, 960x540
These aspect ratios are actually pseudonyms. For example, 4:3 is really the rough equivalent of the industry standard 1.33:1. And the technical specification for 16:9 is actually 1.78:1. If you would like to see more about aspect ratios and their history in the computer and film industries, please take a look at the pages linked to below.
ADDITIONAL INFORMATION ABOUT DISPLAY STANDARDS
Computer Industry
This page lists some current standards for computer display resolutions, showing what is high definition. This page also provides statistics showing in percentages the numbers of people who use each type of display settings online in general and among Steam subscribers, according to surveys.
http://en.wikipedia.org/wiki/Display_resolution
This page lists commonly used resolutions by product and manufacturer, from little phones to the big stuff.
http://en.wikipedia.org/wiki/List_of_common_resolutions
This page has a very nice table listing display standards throughout the history of the computer age.
http://en.wikipedia.org/wiki/Computer_display_standard
Motion Picture Industry
This page shows very good screenshot images depicting the aspect ratios of some of history’s most famous feature films.
http://www.dvdaust.com/film_formats.htm
This web page uses blank rectangular images and brief summaries to offer a very comprehensive overview of that same history.
http://www.widescreen.org/aspect_ratios.shtml
And this article at How Stuff Works.com explains the history of aspect ratios in a concise way, giving the reader the gist of things in layman’s terms without going on and on about it all.
http://entertainment.howstuffworks.com/ ... ormat2.htm