Share

youtube thumb 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: youtube fullscreen button.

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!

By the way, if you are wondering why you have to include both the object and embed tags, duplicating parameters left and right, well, it's to satisfy both IE and other browsers. Firefox, for example, uses the embed part, while IE uses the object one.

● ● ●

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.



Share
  • kobi

    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.

    • http://beerpla.net Artem Russakovskii

      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?

  • truffotti

    Hi Artem,

    I tried to apply your solution to a YouTube custom player that doesn't show the full screen button (the one with thumbnails on the right-hand side) I embedded in my blog, like this:

    Well it looks like I am not allowed to post the code I used.

    I also added: name="allowscriptaccess" and allowscriptaccess="always" as they were not in the embed code.

    It didn't work.

    Any suggestion on how to generate a full screen button on a YouTube custom player?

    Many thanks!

  • alex

    &fs=1 to value , src fields made it work.

  • Cedric

    I have this exact same issue except I'm embedding my video into a facebook fanpage on a custom tab. Does anyone know what coding I would need to make this work?

    So far adding "&fs=1" into the src field makes the button appear for me, but the button doesn't actually work. You can click it and nothing happens.

  • sharing-is-caring

    This worked great! thanks for posting online!

  • shruti sharma

    Hi
    I have another problem. I wanted to know if it is possible to play youtube video automatically in fullscreen by default without the need of clicking the fullscreen button. I am using the same embedded player concept only.

    Actually what I want is that after clicking the youtube video thumbnail and rotating the ipad to landscape mode the video should by default open in fullscreen without the need of clicking to fullscreen button just like the same way it happens in the youtube app that comes with our ipad.

    Please help me with it.

    And if it is not possible please suggest some documentation supporting this decision.

  • Adi

    Hi there

    Can you tell me how I can add this function if using Windows Live Writer to write my blogs?

    It has a feature to allow youtube videos but I cant get it working.

    Thanks

    Adi

  • Lee

    Many Thanks!

    Worked like a charm

  • chathu

    Many many many thanks buddy! This is really helpful article.

  • 2kwave

    Nice job buddy! Thanks!

  • John Vasey

    I followed the thread here and still have some questions. I created a Facebook Page dedicated to a short documentary film. The video is HD and is on YouTube. Currently I have experimented with the free Facebook video Player called Cueler which creates a tab and puts the video there…minus the Full Screen button which I really want to have.

    I am not an expert in html, etc., and I know Facebook has changed it's coding, etc. For a beginner like myself, what is the simplest and hopefully "free way" to create a tab on my Facebook page that would have a video player capable of showing a YouTube video in full screen without leaving the Facebook page?

    Is there any way I could be stepped through the process or could have someone point me in the right direction? I can cut and paste embed code…but I'm not sure what steps I need to do in the right order. The only server I really use is Apple's where I have a website via iWeb…but hopefully I don't have to host anything on there.

    Any help would be greatly appreciated!

    Thanks, John Vasey

  • juggygmt

    Thanks!it helped! and i just used this

    "add this after any parameter to : allowfullscreen="true" "

  • Mike

    Worked perfectly first time. Thanks!

  • Gregory

    Thanks you very much!

  • kaya

    thank you.. I really need to solve this this problem !!!

  • Tobias

    Straight forward, and still useful. Cheers.

  • Krishna

    Thanks dude :)