By adding two parameters to your YouTube embed code on your website, you can easily remove the title from the video and auto-hide the player controls once the video begins to play. When the website visitor hovers over the video with his or her mouse, the player controls will redisplay.
How to implement
Use the parameters below in your existing code, or borrow our code samples and plug in your YouTube URL.
To remove the title
Find all instances of the video URL in your embed code, and add the following parameter to the end of the URL:
&showinfo=0
To autohide the player controls
Find all instances of the video URL in your embed code, and add the following parameter to the end of the URL:
&autohide=1
Code samples
Copy the following code samples into an HTML page and upload them to your server, and you have liftoff! Replace the YouTube URL with yours, and you’re good to go. (You might want to adjust the width and height as well. Remember to adjust it in both places if you use the second code block.)
Newer iFrame embed code (works on most sites—try it first)
YouTube released the iFrame code in July, 2010 to address the issue of browsers that don’t support Flash content, which was previously the only media available for YouTube embed code. The iFrame code renders both Flash and HTML5 media, making your content available to all recent PCs, Macs, smartphones and tablets, including iPhones and iPads.
<iframe title=”Alvin Golf & Country Club 2010-2011 AHS Sponsorship Commercial” type=”text/html” width=”480″
height=”390″ src=”http://www.youtube.com/embed/A0D9w9zoMAU?rel=0&autohide=1&showinfo=0″ frameborder=0
allowfullscreen=”true”></iframe>
Old object embed code (works on more sites)
Only use the original object embed code if your site rejects the iFrame code. For example, some CMS or templated sites cannot render the iFrame code. In this case, use the object code. Be aware that the object code only renders Flash media, and iPhone and iPad users will not have the ability to view your content.
<object width=”480″ height=”390″>
<param name=”movie” value=”http://www.youtube.com/v/A0D9w9zoMAU?version=3&autohide=1&showinfo=0″></param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<embed src=”http://www.youtube.com/v/A0D9w9zoMAU?version=3&autohide=1&showinfo=0″ type=”application/x-shockwave-flash” width=”480″ height=”390″ allowscriptaccess=”always” allowfullscreen=”true”></embed>
</object>
Further reading…
Want more?
More parameters
Video example (iFrame from first code sample)
Thank you!
The Remove Title advice was exactly what I needed.
Your site presented it succinctly, just like I prefer it.
I’m a newbie to this whole thing… building up my own site, working with html, etc. But I am persistent and love to learn, and I really value a site like this that can give me just enough info to get some results and also use as a model for other experimentation on my own and some self-education.
You were very helpful.
Cheers.
I’m glad this article helped you. Can you think of other tutorials that would help you? It’s about time for me to write a new blog post.
-Karen
A big Thank You!!!
I’m glad I could help!
-Karen
This is brilliant – I have done it for a movie and it works great – now 1 more tricky bit – how do I get the movie to redirect itself to an url address when the movie is finished?
Hi Eamonn,
Thanks for the kudos. I posted a new post just for you. See How to redirect a YouTube video to a URL. Enjoy!
-Karen
I have the opposite problem – The title information on my embedded videos on my website does not consistently appear when the player is at rest (not playing). The title only displays intermittently.
How can I get the title information on my embedded videos to consistently display when the player is at rest (not playing)?
Any help would be most appreciated.
Suzanne
Hi Suzanne,
To make the title display by default, use the parameter
.
Thanks,
Karen