Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

NeshyD

macrumors regular
Original poster
Apr 28, 2009
117
43
San Francisco, CA
Hello everyone,

I'm sure there has been a post before on how to make any webapp run in fullscreen, but I thought I would post this especially with the new YouTube Webapp that was released recently.


So let's cut right to the chase! To make the YouTube WebApp run in full screen, make sure to sync the following code as a bookmark (call it 'WebApp' or something similar) to your iOS device.


Code:
javascript:var%20meta=document.createElement(%22meta%22);meta.name=%22apple-mobile-web-app-capable%22;meta.content=%22yes%22;document.getElementsByTagName(%22head%22).item(0).appendChild(meta);alert(%22Fullscreen%20enabled%22);

Once you have the bookmark, navigate on your iOS device to YouTube Mobile (m.youtube.com). After it loads, open up your bookmarks and select the 'WebApp' bookmark and it should pop-up saying 'fullscreen enabled'. With that, you can now save it to the homescreen ('plus' sign then 'Add to Homescreen').

IMG_0209.PNG
IMG_0210.PNG



If everything goes to plan, you should have a full working YouTube webapp running in full screen, just as if it was a native iOS App! It works fairly well, and with iOS4, it even supports the media controls, which is a nice touch.


IMG_0206.PNG
IMG_0207.PNG



By the way, this can also be used for other WebApps (Google Voice, Buzz, GMail).

IMG_0173.PNG



Hope this helps anyone and sorry for this large post!

Neshy
 

deenybird

macrumors regular
Jul 21, 2008
220
0
thanks for the great tip neshy! 5 starred thread!
with this little tip I can now background youtube and still get the audio!

you can do this all right from the phone. Highlight and copy the code, add any bookmark, then edit it and replace the url with the code.
 

jmccray

macrumors regular
Jan 23, 2008
144
0
thanks for the great tip neshy! 5 starred thread!
with this little tip I can now background youtube and still get the audio!

you can do this all right from the phone. Highlight and copy the code, add any bookmark, then edit it and replace the url with the code.
for some reason mine won't let me replace the URL on the phone. is there another way?

edit: google and found the answer nvm!!!!
 

anonymous guy

macrumors 6502a
Mar 18, 2010
505
126
I got it to work - the only problem is I'm on the iPhone 4 and it displays low-resolution artwork for the icon :(
 

Gamst

macrumors regular
Jun 29, 2008
244
4
Manchester, U.K.
When I try and sign in, it goes full screen again? When I try to access favourites etc, it does the same. Is this the case for everyone else?
 

hchavarria

macrumors 6502
Oct 8, 2008
430
0
Wirelessly posted (Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A306 Safari/6531.22.7)

This works great. Thanks for the tip. The YouTube app has now become obsolete in the iPhone, it's to bad that the icon is not high resolution.
 

PabloGS

macrumors member
Oct 29, 2007
89
87
Europe
Black StatusBar?

Well... The original idea was to add the YouTube web app as a full screen app to my springboard, since you can play background music using safari. The real app doesn't allow you to do this. This however is obsolete, since full screen web apps won't allow any background audio either as I found out :/

However I encountered one problem: The StatusBar on iOS7 is plain Black when I added YouTube this way to my springboard.

Any idea why?

Edit:

I just modified a bookmarklet to add the status-bar-style to the head and it didn't help.

Here's the bookmarklet:
Code:
javascript:(function()%7Bvar%20a=document.getElementsByTagName('head').item(0);if(document.querySelectorAll('meta%5Bname=apple-mobile-web-app-capable%5D').length==0)%7Bvar%20c=document.createElement('meta');c.name='apple-mobile-web-app-capable';c.content='yes';a.appendChild(c)%7D;if(document.querySelectorAll('meta%5Bname=apple-mobile-web-app-status-bar-style%5D').length==0)%7Bvar%20b=document.createElement('meta');b.name='apple-mobile-web-app-status-bar-style';b.content='default';a.appendChild(b)%7Dalert('App%20Mode%20Activated')%7D)();

where b.content can either be:
default
black
black-translucent

I assume UIStatusBarStyleLightContent isn't supported either...

Safari HTML Reference: Supported Meta Tags

Just out of curiosity: Any clue?
 
Last edited:
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.