Restore full-screen playback in YouTube’s HTML5 player
Coinciding closely with Apple’s release of Safari 5, touting full-screen playback of HTML5 video, YouTube have disabled their use of the WebKit-API that makes this possible: webkitEnterFullScreen(). They now believe that the browser itself should provide a full-screen button. I do not. But that leaves me with full-browser-window YouTube, or Flash.
Luckily Safari as of version 5 supports extensions! So I made one that turns the Full Screen button on YouTube back into a real Full Screen button. This extension only works on the HTML 5 player (flash does full-screen on its own) and there is one known issue: to prevent stretching 4:3 videos to 16:9 screens, it has to explicitly set the size of the video element. But this size then sticks and I don’t think exiting full-screen is detectable, so after using full-screen the button next to it, changing the player size from smaller to larger and vice versa, is broken. If I ever find out how to fix that, I’ll update the extension.
Meanwhile; download it here: FullScreenYouTube
Edit: It appears that MacOS X 10.6 or higher is needed to support full-screen on the Mac.
Second edit: I’ve just uploaded a new version that fixes a few issues, chief among which that YouTube broke it entirely.
Third edit: YouTube changed all the class names in the player. I’ve updated the extension accordingly.
Fourth edit: I don’t know why, but YouTube’s scripts starting running before mine, thus already setting up their event listeners before I got the chance to prevent that. I now add another button for the really full-screen option. The original button can be removed or left as is, using the preferences.
Fifth edit: Youtube switched from their white player to a black one, which made the button look shitty with the old designed-for-white icon. I’ve updated (v 1.4) so it looks more in-place again.
[…] CyBeRHQ.nl » Restore full-screen playback in YouTube’s HTML5 player cyberhq.nl/2010/06/08/restore-full-screen-playback-in-youtubes-html5-player.html – view page – cached Coinciding closely with Apple’s release of Safari 5, touting full-screen playback of HTML5 video, YouTube have disabled their use of the WebKit-API that makes this possible: webkitEnterFullScreen(). They now believe that the browser itself should provide a full-screen button. I do not. But that leaves me with full-browser-window YouTube, or Flash. Tweets about this link Topsy.Data.Twitter.User[’mrjohnsly’] = {”photo”:”http://s.twimg.com/a/1274899949/images/default_profile_0_normal.png”,”url”:”http://twitter.com/mrjohnsly”,”nick”:”mrjohnsly”}; mrjohnsly: “http://is.gd/cHCDi Fullscreen HTML5 video on Youtube with an extension because Google are pussies! ” 2 minutes ago retweet Topsy.Data.Twitter.User[’frankmuller90′] = {”photo”:”http://a3.twimg.com/profile_images/444542381/664440044_5_eobg_normal.jpeg”,”url”:”http://twitter.com/frankmuller90″,”nick”:”frankmuller90″}; frankmuller90: “http://www.cyberhq.nl/2010/06/08/restore-full-screen-playback-in-youtubes-html5-player.html — Is wel handig voor safari users i presume? ” 34 minutes ago retweet Filter tweets […]
nkomki
[…] FullScreenYouTube – Fügt einen Vollbild-Button zu HTML5-YouTube-Videos hinzu. […]
NIce one. Thank you
Works perfectly! Thank you!
This is perfect, thank you very much!
Hello CyBeRHQ!
Thank you very much!
Fantabulousness! Thank you CyBeRHQ.nl and thank you Apple for finally enabling extensions.
[…] versión de Safari. Ya hay varias muy intereseantes pero una de las que más me gusta es la de Fullscreen-YouTube que permite hacer lo que se rumoreaba pero al final no ha llegado, poner a pantalla completa un […]
[…] This extension is a great way to enable full screen support of YouTube videos if you are using YouTube’s HTML5 player instead of their Flash player. […]
[…] This extension is a great way to enable full screen support of YouTube videos if you are using YouTube’s HTML5 player instead of their Flash player. […]
[…] Full Screen HTML5 Youtube Allows real fullscreen with Youtube’s HTML5 beta […]
[…] This extension is a great way to enable full screen support of YouTube videos if you are using YouTube’s HTML5 player instead of their Flash player. […]
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
Great extension. Any chance of a keyboard shortcut to go into fullscreen mode?
Interesting idea. I’ll have a look, but I don’t think it’s possible. The full-screen method can ONLY be called from a click handler. Well, you can call it any time of course but if it’s not the result of a click by the user it just doesn’t do anything.
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
Doesn’t work for me. It works when I click on the four corner symbol of flash videos, but when I do the same on the html5 videos nothing happens. (leopard).
[…] This extension is a great way to enable full screen support of YouTube videos if you are using YouTube’s HTML5 player instead of their Flash player. […]
[…] This extension is a great way to enable full screen support of YouTube videos if you are using YouTube’s HTML5 player instead of their Flash player. […]
Paf:
If you go here: http://jilion.com/sublime/video and play the video, and then command-click the full-screen icon in the lower right corner, does that go full-screen? If not, then it’s probably not supported on Leopard.
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
[…] Bypass googles weird method of HTML5 fullscreen in the original HTML5 player with FullScreen YouTube http://www.cyberhq.nl/2010/06/08/restore-full-screen-playback-in-youtubes-html5-player.html […]
[…] CyBeRHQ.nl » Restore full-screen playback іn YouTube’s HTML5 player […]
Marco: I have the same problem as paf. The fullscreen button in HTML5 YouTube does nothing for me with this extension installed. I tried the link you sent. Command-clicking the fullscreen button makes the video fill the browser window, but doesn’t make it completely fullscreen. I’m on 10.5.8 (PPC).
Amazing!!!!! Thanks!
on leopard/G5 it does not work. i get
“INVALID_STATE_ERR: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.” in “fullscreenize.js” at line 24.
seems to be a webkit bug.
also: pls fix line 5 of button.css, where it says “x” instead of “px” :-)
Airwave: Ok. That means that safari doesn’t support real full-screen on Leopard, so I can’t make that work.
Luc: Thanks!
Marco: Thanks for investigating the issue. I’ll enjoy using this plugin when my Mac Pro gets back from repair.
[…] CyBeRHQ.nl » Restore full-screen playback in YouTube’s HTML5 player […]
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
[…] CyBeRHQ.nl » Restore full-screen playback in YouTube’s HTML5 player […]
[…] This extension is a great way to enable full-screen support of YouTube videos if you’re using YouTube’s HTML5 player instead of its Flash player. […]
[…] Pantalla completa de vídeos YouTube si estàs utilitzant el reproductor de YouTube HTML5 en comptes del seu reproductor de Flash.[Youtube Full Screen] […]
[…] FullScreenYouTube | YouTube5 […]
[…] FullScreenYouTube | YouTube5 […]
Hi Marco. Awesome plugin. Any chance of overriding the default dim of the display in fullscreen? It sucks to constantly have to move the mouse around.
Wow… works perfecly on my macbook with snow leopard and safari 5. Excellent plugin, exacly what i’ve looking for.
Thanks!!!!
Hi,
Your brilliant extension stopped working as of, well, today, I think. YouTube’s doing something to its HTML5 player.
Indeed it has. I have fixed the extension and the resize-problem in the new version. Safari should be able to auto-update it.
Sweet. Thank you so very much for this little life-saver.
Thanks for the 1.1 update.. love this extensions.. great work.. wanted to show my appreciation
dispenses utilize a great ınternet site decent Gives thanks for the effort to help out people
I regret to say it, but looks like your phenomenal brainchild needs another update. Whatever YouTube’s doing there is causing the player controls to go haywire with v1.1 enabled.
Ugh, they changed all the class names. I’ve fixed it. Auto-update should pick it up.
Thanks! That did the trick nicely.
Could you add an AutoHD option for the player?
Try emesh
Whenever I hit the full-screen button it activates YouTube’s use of the button as well which is the stupid fill to browser window size. Any chance of a fix?
I noticed this already. As soon as I figure out why that’s happening I’ll fix it, too.
Fixed.
Thank you.
v1.3 — Excellent!
[…] showing by default. YouTube video downloader – Sticks a download link on video pages. FullScreenYouTube – When using the HTML5 player it inserts a fullscreen button. YoutubeWide – Defaults […]
I’m delighted that I’ve found this blog site. Lastly a thing not a rubbish, which we study very often. The website is lovingly serviced and current. So it should be, thank you for this welcome change.
[…] YouTube Full Screen — позволяет развернуть видео с youtube на весь экран в случае если вы используете проигрыватель html5. […]
Could you update the extension to support embedded videos like the one shown here:
http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
Thanks in advanced and keep up the great work!
Thanks for writing about this. There’s a mass of solid tech info on the world wide web. You’ve got a lot of that info here on your internet site. I’m impressed – I try to retain a couple blogs reasonably live, but it’s a struggle occasionally. You’ve done a large job with this one. How do you do it?
[…] CyBeRHQ.nl » Restore full-screen playback in YouTube’s HTML5 player […]
Hello!I am following your blog for some weeks now. I have to say that it is very informative. It is added in my favourite list and i will try to follow it frequently. Thanks for the nice posts . Furthermore, i really like your theme and how you have organised your site . Is it possible to tell me the name of your template ? Cheers
TY a ton for posting this, it was very handy and showed me a lot
Just thought I would comment and say great theme, did you create it on your own? Really looks excellent!
Thought I would comment and say awesome theme, did you create it yourself? Really looks really good!
When I view your RSS feed it throws up a bunch of garbled text, is the problem on my end?
Just thought I would comment and say great theme, did you make it on your own? It looks superb!
Thank you for putting this up, it was very informative and showed me very much
TY for the helpful post! I would never have found this on my own!
TY for writing this, it was very helpful and helped immensely
I have wanted to write about something like this on one of my blogs and this gave me an idea. Cheers.
Thought I would comment and say awesome theme, did you code it on your own? It looks excellent!
In hunting for websites related to website hosting and specifically comparison hosting linux program net, your website came up.
I have been examinating out a few of your articles and it¡¯s pretty good stuff. I will make sure to bookmark your website.
“Lastly a thing not a rubbish, which we study very often. The website is lovingly serviced and current. So it should be, thank you for this welcome change.”
Where I have been able to read about this?
ffsegsdgsfg
burlando o wpqq
Hello.This post was really motivating, particularly since I was browsing for thoughts on this issue last Saturday.
Acesse Squeezes
Hi,
I was wondering if you could update your wonderful extension to work on YouTube’s embedded HTML5 videos, such as these here:
http://blogs.suntimes.com/ebert/2011/01/post_4.html
Thanks
As a newcomer in this field I am constantly on the lookout for insightful content on the subject. Your blog has filled my need to a great extent.
Super Seite! LG
Thanks, very nice!
Doesn’t appear to work anymore, think you could update it?
Fucking youtube and their tendency to change class names every few months.
I’ve changed it enough so that the button appears again, but it’s not styled entirely correctly just yet. Don’t have time for that bit of detail at this moment..
This currently doesn’t work for me, but I found that right-click anywhere on the video and choose “Pop out” opens just the video in another window, then choosing Lion’s full screen gives you a true full screen video. I hope youtube listens to complaint’s and re-implements the full screen button for webkit.
Hi Marco, this is a great idea but the extension doesn’t seem to be working for me (or I’m doing something wrong).
I’m using Safari 5.1.2 on OS X 10.7.2.
I’ve got the extension installed, but when I click the fullscreen button on HTML5 videos, still nothing happens.
If I enable the “remove original button” option, then I don’t see any fullscreen button at all on HTML5 videos.
Any advice?
Is this still working for anyone else? The button for true full screen no longer appears for me.
Hi,
Youtube once again changed a bunch of shit around. I’ve changed the extension to reflect those changes. You’ll find it in your Safari extension updates thing when that decides to poll for updates (or re-download it above.)
Thanks for the update Marco! Works perfectly.