Embedded YouTube videos in HTML5 standalone app iOS 8.3 opening YouTube app

8
votes

Apple recently fixed the error on iOS 8 where YouTube videos would not play on a WebApp (Why HTML5 video doesn't play in IOS 8 WebApp(webview)?). This error was fixed in iOS 8.3 but I've come across another problem. When a YouTube video is embedded on the page, the video will be opened in the YouTube app if it is installed on the iPad

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>HTML5 Video Standalone Test</title>
<style>
    body {
        margin:0;
    }
</style>
</head>
<body>
    <iframe width="700" height="394" src="//www.youtube.com/embed/xspoREpBOhY?rel=0" frameborder="0" allowfullscreen></iframe>
</body>
</html>

If I open the page in Safari normally then it works correctly. The video does not autoplay and it plays in the browser when the user touches it. If I delete the YouTube app then the WebApp works as expected as well.

If the YouTube app is installed then the user is taken out of the WebApp and put into the YouTube app. This happens if a video exists on the page that is opened. The video doesn't have to autoplay selected or the user doesn't have the option to play the video. They are automatically taken out of the WebApp as the default.

Is there a way to prevent this from happening without having to delete the YouTube app off of the iPad?

1
javascripthtmlipadhtml5-videoios8.3

1 Answers

11
votes

I was sent this answer from the Apple Support Communities. All I had to do was to add '-nocookie' after youtube in the src of the iframe

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>HTML5 Video Standalone Test</title>
<style>
   body {
    margin:0;
   }
</style>
</head>
<body>
    <iframe width="700" height="394" src="//www.youtube-nocookie.com/embed/xspoREpBOhY?rel=0" frameborder="0" allowfullscreen></iframe>
</body>
</html>

It worked for me in my test app.