Category Archives: IOS Tips

Finally iOS 10 lets you play videos inline!

As a web developer, a constant frustration has been Apple’s decision to basically hijack any video player and play the video through their full-screen player. I mean I get the reasoning, especially with the first iPhones. The screen was so small that watching an inline video or using touch controls at that size could be a chore. The only caveat to that rule was with an iPad, where inline video was kosher. But it’s been 9 years since the phone first launched, time to get with the program. Thankfully with iOS 10 they have; sort of.

Videos still open up in full-screen by default, but now you have the option to minimize it back into the page with the video still playing. Simply click the little double arrows in the bottom right corner of your full-screen video and boom, you’re good to go. To force the video to play inline by default, you need to add one line to your video embed code:
playsinline webkit-playsinline="webkit-playsinline"
Thats it. Now your video will play inline for any phone running iOS 10.

IOS Tip: Maximizing your screen space with Minimal-UI

In the olden iOS 6 days, on an iPhone you could trigger the Safari browser to hide the URL bar by telling the your website to scroll one pixel when it loads. This would kickstart the Safari browser’s built-in behavior to minimize the URL bar once you started interacting with the page.

A bit hacky? For sure, but it worked, and had become the de facto standard for web developers targeting iOS. Unfortunately the iOS 7 update broke all this. Thanks a lot, Apple! Thankfully enough people must’ve complained because along with the latest 7.1 update, Apple also introduced yet another viewport meta tag.

<meta name="viewport" content="minimal-ui">

“minimal-ui” will hide the top URL bar and footer navigation bar on site load. Fantastic for web apps, potentially good /bad for every day sites, since the back / next page buttons are hidden by default. Since most sites I build at work are usually one pagers, this probably would work fine.

I first stumbled across it in the wild here:

IOS tip: Add a Smart App Banner To Your Website

So you tried to get by with just a mobile-optimized version of your site, but it wasn’t cutting it and you built an app. How do you let iPhone users know you even have an app? Companies have tried pretty much everything under the sun and 99% of them are annoying as hell. Thankfully with IOS 6, Apple has provided a super simple standard to incoporate this.
Start by adding the snippet below into your site:

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

There are three parameters you can play with, but really you only need the first one to get it up and running. The parameters are: app-id, affiliate-data and app-argument. The app-id is your app’s unique 9-digit identifier code which you can easily find at the Apple Link Maker site. Affiliate-data is only needed if you are an itunes affiliate. Now the app-argument parameter, which is also optional, is what makes this snippet so useful. Here you can pass in a deep-link that that will help the user return to the same spot in the app where they were in the site.

This is so easy. Hopefully with this smart app banner code, people will stop resorting to full page takeover pop-ups that force people to decide if they want the app before even getting to your site. Make sure to read over the full documentation here.