Are Your Youtube Video Embeds Missing The Full Screen Button? Here Is How To Fix It
| Share |
Don't you just hate it when you visit somebody's blog, see an embedded Youtube video, play it, and find that the player is missing the full screen button.
Yeah, this one: 
.
Well, I hate it too, so please, try not to be that guy. I realize sometimes you copy the embed code wrong or, on a larger scale, you add the wrong embed code to your generic template.
Not a problem. If your Youtube embeds are missing this button, here is how you can easily fix it.
The Problem
Here's an example video that doesn't have the button (it's really good too, if you haven't seen it yet):
The fullscreen button is nowhere to be found because by default the Youtube player doesn't include it and the embed code is missing the correct pieces.
Here is the embed code for the video above without the full screen button:
<object width="425" height="344">
<param
name="movie"
value="http://www.youtube.com/v/sdUUx5FdySs&hl=en_US">
</param>
<param
name="allowscriptaccess"
value="always">
</param>
<embed
src="http://www.youtube.com/v/sdUUx5FdySs&hl=en_US"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="425"
height="344">
</embed>
</object>The Solution
Modify the code by adding the following:
- put this after the last <param> and before the <embed>: <param name="allowFullScreen" value="true"></param>
- add this after any parameter to <embed>: allowfullscreen="true"
- append this to both the "value" parameter of the <param> tag with the name="movie" as well as the src parameter of the <embed> tag: &fs=1
The first 2 parameters give Flash access to go full screen. The last one instructs the Youtube player to add the full screen button.
Here is the final embed code:
<object width="425" height="344">
<param
name="movie"
value="http://www.youtube.com/v/sdUUx5FdySs&hl=en_US&fs=1">
</param>
<param
name="allowscriptaccess"
value="always">
</param>
<param
name="allowFullScreen"
value="true">
</param>
<embed
src="http://www.youtube.com/v/sdUUx5FdySs&hl=en_US&fs=1"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425"
height="344">
</embed>
</object>Voila!
Artem Russakovskii is a San Francisco programmer, blogger, and future millionaire (that last part is in the works). Follow Artem on Twitter (@ArtemR) or subscribe to the RSS feed.
In the meantime, if you found this article useful, feel free to buy me a cup of coffee below.
beer planet is a blog about technology, programming, computers, and geek life. It is run by Artem Russakovskii - a local San Francisco geek who currently works at 
Artem loves commenting on other people's blogs and reading comments on his own, so go ahead and leave one.
Hey!
I tried this solution with some youtube videos embedded in my site (hosted by google sites) and it doesn't work…
any idea why it doesn't generate the Fullscreen button?…
thank's in advance,
Kobi.
I think I am going to need more info than that, Kobi. Can you go to http://www.tinypaste.com and paste the sample embed code that doesn't work for you and then paste the url to the pasted code here?
[...] Are Your Youtube Video Embeds Missing The Full Screen Button? Here Is How To Fix It (beerpla.net) [...]