ZO HORNBILL: Youtube

Showing posts with label Youtube. Show all posts

Remove YouTube's Logo from Embedded Videos & Players

12:40:00 AM | Youtube

So, although this is not a default option within the embed code box on YouTube videos, this can be done quite simply by adding the following to the end of a YouTube embed URL:

?modestbranding=1

So for example, the standard iFrame embed code you would get for a video like the one above would be:

<iframe width="560" height="349" src="http://www.youtube.com/embed/VIDEOID" frameborder="0" allowfullscreen></iframe>

In this case, you merely need to add "?modestbranding=1" to the end of the src= tag like so:

... src="http://www.youtube.com/embed/VIDEOID?modestbranding=1" ...

You would do the same, adding "?modestbranding=1" to each instance of the YouTube player URL for the old embed code -> like this:

<object width="560" height="349">
<param name="movie" value="http://www.youtube.com/v/VIDEOID?modestbranding=1&amp;version=3&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/VIDEOID?modestbranding=1&amp;version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Issues, Tips & WorkArounds:

This only works if you use it as the first parameter after the video id. IE - it can not be added after any other parameters or it will break and the logo will reappear when the video starts. To illustrate what I mean, you can NOT do something like this:

... src="http://www.youtube.com/embed/VIDEOID?hd=1&amp;modestbranding=1" ...

The modestbranding parameter needs to come first.

Additionally, this will not work with a few of the other embed player parameters like "showinfo" which can be used to set whether or not the title shows at the top of the video (0= no title). For whatever reason, if you continue to use "showinfo=0", the "modestbranding" parameter will not function as it's supposed to and the logo will reappear when you press play.

As a work around to this, I discovered a new parameter that they dont publicize => "title=". So, if you would like to remove the logo AND you want to remove the title from the player, you need to structure the embed src player string as follows, leaving "title=" blank:

... src="http://www.youtube.com/embed/VIDEOID?modestbranding=1&amp;title=" ...

22Share

Ever wanted to share a YouTube video with someone but want to share just a certain part of it without having them start from the beginning? Need to have a video automatically loop?

YouTube URLs can be modified with various query string parameters to change certain features and how to video player works. In most cases, parameters follow the video URL with an ampersand (&). The most commonly seen parameter is probably &feature=related which shows that the video was found through clicking on a Related Video. This parameter basically does absolutely nothing for the actual user though.

Note: YouTube is constantly making changes. I am continually updating this article to reflect these changes. If you notice something not working properly, please inform me in the comments.

Last updated on January 14, 2012 with updates to the HD embed parameter.

There are many URL parameters you can add to YouTube video URLs as well as the embed codes. Let’s start with the video URL.

Click here to jump to the Embedded Video URL Parameters.

Video URL Parameters

There are parameters to add to the URL of a YouTube video. Video ID is a placeholder for the YouTube video ID which is the string of alphanumeric characters after the watch?v=.

High Quality Videos

YouTube supports up to HD quality videos, but some videos might not have an HD format available. Some might just have a High Quality option available. To create a link that automatically loads the video in HQ or HD, simply add&fmt=6 (480p HQ FLV), &fmt=18 (480p MP4) or &fmt=22 (720p HD) to the end of the video URL.

Update: YouTube has made many changes recently and the fmt parameter does not seem to work anymore. For HD, add &hd=1 instead. The fmt parameter no longer does anything.

This example video link will start automatically in 720p HD (&hd=1).

http://www.youtube.com/watch?v=Video ID&hd=1

Skip to Specific Time

Suppose you’re trying to share a video clip with someone, but you don’t really think its necessary for them to watch the whole thing from the beginning. You can specify where the video should start as well as easily jump to a specific point by adding #t=7m30s. The number in front of the ‘m’ is the minute and in front of the ‘s’ would be seconds. In this example, I’m skipping to 7:30.

This example video link will automatically skip to 1:32 (#t=1m32s).

http://www.youtube.com/watch?v=Video ID#t=1m32s

Browser Window Full Size Player

This will load a large player that fills your entire browser window.

Simply replace the ‘?’ and ‘?=’ in the URL to ‘/’ and remove ‘watch’.

http://www.youtube.com/v/Video ID

This example video will start in a full size player.

Prevent Video from Autoplaying

Same procedure as using the large player. This player does not start playing automatically. If you are using this full size player and want it to autoplay, then simply add ?autoplay=1 to the end of the URL. Use an ampersand (&autoplay=1) if this is not the only parameter.

http://www.youtube.com/v/Video ID?autoplay=1

Loop Video

There are many online websites offering this functionality (often involving just changing the domain name), but there is no need to use an external service because YouTube actually has this built in.

Same procedure as using the large player, but add ?loop=1. Use an ampersand (&loop=1) if this is not the only parameter. This is very useful for looping music.

http://www.youtube.com/v/Video ID?loop=1

How To Remove Youtube Control Bar

The fact is Youtube will allows you to change a whole bag of parameters using their Youtube Player. All it is, is altering the embed code and adding some additional strings to it, really simple.

Changing these parameters lets you:

• Remove the “related videos” display, which can often be awkward and very unrelated.
• Prevent the title of the video from appearing on the clip (cleaning up the appearance a bit)
• Force the video to play in high definition on any browser instead of defaulting to a lower quality.
• Get rid of YouTube’s player contols altogether, making your clip minimalst in the extreme.

Very best of all, even a coding-ignorant rhubarb farmer like myself can use these parameters. Just copy and paste YouTube’s embed code from a video page, drop it into your website or blog, and add the parameters onto the video link in the HTML.

Example: I need to post this clip on my weblog. When I’m watching the video on YouTube, I click “Embed” just beneath the player. I use the “Custom” size selection and inform it my weblog is 460 pixels wide. YouTube does the math for me (huzzah!) and creates a code that looks like this:

<iframe title=”YouTube video player” width=”460″ height=”289″ rel=nofollow src=”http://www.youtube.com/embed/fxs970FMYIo” frameborder=”0″ allowfullscreen></iframe>
The result?

Looks ok right? Yea but look at all the link leakage on the video. The point of bringing people to your website is to keep them there unless your referring them else where, am I right? As a marketer, this is one of the reason I dont post Youtube videos on my blog even though it could help with my SEO.

First thing we are gonna do is remove the title of the video up in the header part of the clip by adding this to the embed code ;showinfo=0“, we are then gonna add this also to the code rel=0to remove any related videos appearing after the clip is done. And then we also want it to play in high def giving us the best quality possible for the video to play adding this code HD=1. Let now put all three codes together and this is what you get = HD=1;rel=0;showinfo=0“.

Although we removed alot, its still not enough, because now that the lead leakage is gone, we still have that ugly control bar in the video which still leads people back to youtube, and also look disgusting! Heres how we remove that control bar. We now add this pieace of the code to the end of our newly formed code ;controls=0“. Which then looks like this.

Remove a Linked Video to a YouTube Post on Blogger

12:35:00 AM | Youtube

1. Click “Edit Posts” under the name of the blog with the post from which you want to remove the YouTube video link.
2. Scroll through the Edit Posts page to locate the post that contains the YouTube video. Click the blue “Edit” link beside the post to open the Blogger post editor tool.
3. Click the “HTML” tab above the post editor’s content field. Find the linked YouTube’s iFrame embed code, which will look similar to this:

<iframe allowfullscreen="yes" frameborder="0" width="400" height="300" src="http://www.youtube.com/embed/abcRGx95rel=0"></iframe>

4. Highlight and delete the entire iFrame code snippet to remove the video link from your blog.
5. Click the blue “Preview” button under the post editor to see how the edited post looks on your blog. Click the orange “Publish Post” button to store the changes and publish the edited post to the blog.

How to Customize YouTube Embeddable Player Features

7:36:00 PM | Youtube

Turn off Title & Ratings
- &showinfo=0
Turn off Search
- &showsearch=0
Turn on Related Videos
- &rel=1
Turn off Annotations
- &iv_load_policy=3
Force Closed Captions
- &cc_load_policy=1
Turn on AutoPlay (not recommended)
- &autoplay=1
Loop Playback
- &loop=1
Remove Full Screen Option (not sure why you'd want to)
- &fs=0

What if you need a custom size for your player?

Well, this seems like an obvious one, and it is. Keep in mind that YouTube's player is in 16x9 wide-screen format. If you want to change the dimensions, do so using a 16:9 aspect ratio and add 25px in height for the player controls. For example, lets say that you needed the video to be 320px wide:

--> 320(9)=Height(16) and then add 25px

--> Height=180 + 25 = 205px

How to Customize YouTube Video Quality

Youtube already allows you to customize the embed code and allows the videos to play in HD, but in case you were wondering what the codes were for this and/or how to force play back of high-quality files (not HD);

Show in High-Definition 720p
- &hd=1
Show in High-Quality
- &ap=%2526fmt%3D18

Here is an example embed code using the high-quality "hack"

How to Remove YouTube's Logo from Youtube

7:28:00 PM | Youtube

So, although this is not a default option within the embed code box on YouTube videos, this can be done quite simply by adding the following to the end of a YouTube embed URL:

?modestbranding=1

So for example, the standard iFrame embed code you would get for a video like the one above would be:

<iframe width="560" height="349" src="http://www.youtube.com/embed/VIDEOID" frameborder="0" allowfullscreen></iframe>

In this case, you merely need to add "?modestbranding=1" to the end of the src= tag like so:

... src="http://www.youtube.com/embed/VIDEOID?modestbranding=1" ...

Issues, Tips & Work Arounds:

... src="http://www.youtube.com/embed/VIDEOID?hd=1&amp;modestbranding=1" ...

The modestbranding parameter needs to come first.

... src="http://www.youtube.com/embed/VIDEOID?modestbranding=1&amp;title=" ...

As just a fun little note on this - I found out that you can actually change that title to be whatever you want. See this example.

YouTube Embedded Player Parameters

7:03:00 PM | Youtube

All of the following parameters are optional. The list shows parameters supported in any YouTube embedded player. You can customize the list using the pulldown menu below. Note that these parameters are only officially supported by the embedded player, but a subset of them may work with other players such as the playlist player or the custom player.

Note: IFrame embeds can load either the HTML5 player or the AS3 player. Though some parameters are not supported in both players, an IFrame embed that loads the AS3 player will support all parameters that work with that player and ignore all other parameters. Similarly, an IFrame embed that loads the HTML5 player will support all parameters that work with that player while ignoring all other parameters.

For example, the HTML5 player does not currently support the cc_load_policy parameter, but you can still specify that parameter when creating an IFrame embed. If the embed loads the AS3 player, the player will support the parameter, and if the embed loads the HTML5 player, the player will ignore it.

All YouTube player parameters

autohide

Values: 0, 1, and 2 (default). This parameter indicates whether the video controls will automatically hide after a video begins playing. The default behavior is for the video progress bar to fade out while the player controls (play button, volume control, etc.) remain visible.

If this parameter is set to 0, the video progress bar and the video player controls will be visible throughout the video.
If this parameter is set to 1, then the video progress bar and the player controls will slide out of view a couple of seconds after the video starts playing. They will only reappear if the user moves her mouse over the video player or presses a key on her keyboard.

autoplay

Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.

border

Values: 0 or 1. Default is 0. Setting to 1 enables a border around the entire video player. The border's primary color can be set via the color1 parameter, and a secondary color can be set by the color2 parameter.

cc_load_policy

Values: 1. Default is based on user preference. Setting to 1 will cause closed captions to be shown by default, even if the user has turned captions off.

color

This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white, and, by default, the player will use the color red in the video progress bar. See the YouTube API blog for more information about color options. Note: This parameter is supported in the AS3 embedded player and in IFrame embeds that load the AS3 player. (IFrame embeds could also load the HTML5 player.) However, using the color parameter will disable the modestbranding option in the embedded player.

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.

controls

Values: 0 or 1. Default is 1. This parameter indicates whether the video player controls will display. If this parameter is set to 0, then the player controls will not display, causing the player to look like the chromeless player.

disablekb

Values: 0 or 1. Default is 0. Setting to 1 will disable the player keyboard controls. Keyboard controls are as follows: Spacebar: Play / Pause Arrow Left: Jump back 10% in the current video Arrow Right: Jump ahead 10% in the current video Arrow Up: Volume up Arrow Down: Volume Down

egm

Values: 0 or 1. Default is 0. Setting to 1 enables the "Enhanced Genie Menu". This behavior causes the genie menu (if present) to appear when the user's mouse enters the video display area, as opposed to only appearing when the menu button is pressed. Note: This parameter is not supported in the AS3 embedded player.

enablejsapi

Values: 0 or 1. Default is 0. Setting this to 1 will enable the Javascript API. For more information on the Javascript API and how to use it, see the JavaScript API documentation.

fs

Values: 0 or 1. Default is 0. Setting to 1 enables the fullscreen button in the embedded player and does not affect the chromeless player. The fullscreen option will not work if you load the YouTube player into another SWF. Note that you must include some extra arguments to your embed code for this to work. The bold text in the following example is required to enable fullscreen functionality:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1"
  type="application/x-shockwave-flash"
  allowfullscreen="true"
  allowscriptaccess="always"
  width="425" height="344">
</embed>
</object>

hd

Values: 0 or 1. Default is 0. Setting to 1 enables HD playback by default. This has no effect on the Chromeless Player. This also has no effect if an HD version of the video is not available. If you enable this option, keep in mind that users with a slower connection may have an sub-optimal experience unless they turn off HD. You should ensure your player is large enough to display the video in its native resolution. Note: The AS3 player will automatically play the version of the video that is appropriate for your player's size. If an HD version of a video is available in the AS3 player and that is the appropriate version for your player, then that is the version that will play.

iv_load_policy

Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotation to not be shown by default.

loop

Values: 0 or 1. Default is 0. In the case of a single video player, a setting of 1 will cause the player to play the initial video again and again. In the case of a playlist player (or custom player), the player will play the entire playlist and then start again at the first video. Note: This parameter has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loopparameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

modestbranding

This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player. Note: This parameter is supported in the AS3 embedded player and in IFrame embeds that load the AS3 player. (IFrame embeds could also load the HTML5 player.)

origin

This parameter provides an extra security measure for the IFrame API and is only supported for IFrame embeds. If you are using the IFrame API, which means you are setting the enablejsapi parameter value to 1, you should always specify your domain as the origin parameter value.

playerapiid

Value can be any alphanumeric string. This setting is used in conjunction with the JavaScript API. See the JavaScript API documentation for details.

playlist

Value is a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO_ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter.

rel

Values: 0 or 1. Default is 1. Sets whether the player should load related videos once playback of the initial video starts. Related videos are displayed in the "genie menu" when the menu button is pressed. The player search functionality will be disabled if rel is set to 0.

showinfo

Values: 0 or 1. Default is 1. Setting to 0 causes the player to not display information like the video title and uploader before the video starts playing.

showsearch

Values: 0 or 1. Default is 1. Setting to 0 disables the search box from displaying when the video is minimized. Note that if the rel parameter is set to 0 then the search box will also be disabled, regardless of the value of showsearch.

start

Values: A positive integer. This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. Note that similar to the seekTo function, the player will look for the closest keyframe to the time you specify. This means sometimes the play head may seek to just before the requested time, usually no more than ~2 seconds.

theme

This parameter indicates whether the embedded player will display player controls (like a 'play' button or volume control) within a dark or light control bar. Valid parameter values are dark and light, and, by default, the player will display player controls using the dark theme.

Example Usage

AS3 and AS2 players – Append the parameters to the end of the YouTube video SWF URL for the AS2 or AS3 players. The SWF URL has one of the following formats:The following instructions explain how to use the parameters above:

Embedded AS3 player:

http://www.youtube.com/v/VIDEO_ID?version=3

Chromeless AS3 player:

http://www.youtube.com/apiplayer?video_id=VIDEO_ID&version=3

Embedded AS2 player:
```
http://www.youtube.com/v/VIDEO_ID
```

Chromeless AS2 player:

http://www.youtube.com/apiplayer?video_id=VIDEO_ID

Note: The AS2 Player API has been deprecated.

HTML5 player (IFrame embeds) – Select one of the following options. Both are explained in more detail in the Loading a video player section of the IFrame Player API documentation.
- The second parameter in the constructor for the video player is an object that specifies player options. The parameter's playerVars property is an object that identifies player parameters.
- If you create the <iframe> element for your video player yourself (rather than having the JavaScript code create it), you can append player parameters directly to the end of the URL. The URL has the following format:
```
http://www.youtube.com/embed/JW5meKfy3fY
```

If you are using the YouTube Data API, you can programmatically construct these URLs by retrieving the <yt:videoid> tag value in an API entry and replacing the VIDEO_ID text in the URLs above with that value. You should also confirm that the feed entry for the video contains a <media:content> tag for which the value of the yt:format attribute is 5. The absence of that tag indicates that the video owner had disabled embedding for the video.

<entry>
   ...
   <media:group>
     <media:content url="http://www.youtube.com/v/VIDEO_ID" type="application/x-shockwave-flash" medium="video" 
          isDefault="true" expression="full" duration="100" yt:format="5"/>
    ...
    <yt:videoid>VIDEO_ID</yt:videoid>
  </media:group>
  ...
<entry>

The following example uses the autohide and showinfo parameters to prevent video information from displaying at the top of the player before the video starts playing and to automatically hide the player controls after the video starts playing:

<object width="425" height="355">
  <param name="movie"
         value="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&autohide=1&showinfo=0"></param>
  <param name="allowScriptAccess" value="always"></param>
  <embed src="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&autohide=1&showinfo=0"
         type="application/x-shockwave-flash"
         allowscriptaccess="always"
         width="425" height="355"></embed>
</object>

Remove YouTube's Logo from Embedded Videos & Players

Issues, Tips & WorkArounds:

Video URL Parameters

High Quality Videos

Skip to Specific Time

Browser Window Full Size Player

Prevent Video from Autoplaying

Loop Video

How To Remove Youtube Control Bar

Remove a Linked Video to a YouTube Post on Blogger

How to Customize YouTube Embeddable Player Features

How to Customize YouTube Video Quality

How to Remove YouTube's Logo from Youtube

Issues, Tips & Work Arounds:

YouTube Embedded Player Parameters

All YouTube player parameters

Connect with Us

Popular Posts

Categories

Tools

Footer 1

Footer 2

Footer 3