Today I’ll show you how to embed a youtube video that has no interface controls and no youtube logo. We’ll also cover how to autoplay and remove related videos, which results in a professional presentation without the cost typically associated with pro video streaming services.
Our video will have a simple play/stop button (or play automatically) and allow the viewer to maintain focus on the presentation isntead of being distracted by extranious elements.
This will also prevent viewers from skipping through the video, which is useful if you have a sales presentation or something you would like viewers to watch in it’s entirety.
When I saw what was available in the commercial department, I realized there were substantial costs and bandwidth limitations for these video services, and after some research found we can use YouTube to create the same thing.
What we’ll be creating
Here’s How To Do It
In this example we’re using the default embed code from youtube, and adding a few values to the iframe source, as I’ve highlighted addition below.
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/f9geXHY0uwQ?rel=0&modestbranding=1&autoplay=0&controls=0” frameborder=”0″ allowfullscreen></iframe>
If there are black bars above and below your video, You’ll want to reduce the value of the height attribute to account for the missing progress bar. Reducing the value by 30px and reloading the page should fix the problem.
There are 4 parameters we’re adding: modestbranding will remove the logo, autoplay can play the video when it loads, rel includes or omits related videos after the video is done playing, and controls can be used to remove the UI elementsunder the video altogether.
When adding these values to create a query string, it’s important to note that the first one must be appended by ? while all others are added using &.
Here are the 4 parameters we will be adding, and their descriptions from YT documentation.
There are many others also, a link to the full list is included below.
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.
modestbranding – Values: 0 or 1. Default is 0.
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.
autoplay – Values: 0 or 1. Default is 0.
Sets whether or not the initial video will autoplay when the player loads.
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.
Other parameters and their uses:
http://code.google.com/apis/youtube/player_parameters.html
Please leave a comment below if you’ve found this article useful, it’s helpful to know what you want to learn more about.
hi, I used the code add ons that you give…
iframe with resize doesn’t work in a google site (it reverts to the youtube player gadget, usual size with control bar)
so I used the object code
works, I get 16:9 video
but there is 1px white line at the bottom which is bad cos my page bg is dark blue.
this must be youtube right?
no it was my mistake, there are two values to change in object code, i at first only changed the last values.
Hey Spiderman, As you’ve found you can adjust the height and width to remove any extra spacing, provided your aspect ratio is correct. Thanks for the tip about Google site compatibility.
-Shaun