I am developing a hybrid application which supports android and iOS.
I need to embed the youtube video in the application such that it should be opened within the application.
I have tried using iFrame and it is working on the browser.
But in the iPhone the youtube video which is embedded in the iframe is opening in the external browser and not withing the application.
Searching on google, I found that in the cordova plist (cordova iOS application) there is option to allow allexternalURL's to be opened within the webview. But, this is impacting other places where few url's should be opened in the external browsers and not within the application.
Please suggest if there is any way to integrate the youtube where the video should be opened within the application for hybrid app.
Here is a nice Tutorial
codes For a quick Access.
<html>
<head>
<title>YouTube video</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
*.youtube.com
*.ytimg.com
Video will play on your Simulator Also.
Related
LATER NOTE...
Problem went away after about 24 hours. Reported by many customers.
My website has embedded youtube videos. They have worked fine for years.
Beginning on Jan 29, 2020, my customers began to report the embedded videos not working on mobile Safari. I tried to play them on Safari on iOS 12.1.4 with the same result... they fail to play. Works fine on desktop Chrome browser.
The following test embed code is copied from youtube with no modifications.
I've tried it at several domains with the same result:
Plays fine on desktop Chrome, fails to play on iOS Safari.
Out of the blue... Can anyone else reproduce this?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
https://jsfiddle.net/sg2enahL/
Just go to History in Safari. Select clear History down the bottom to clear cookies and website data for the last hour. This should fix the problem.
I have a website and am currently developing an iOS app.
I'm sharing the link to the website on Facebook. The URL scheme is working in the native app.
The HTML of the website starts like this:
<!DOCTYPE html>
<html>
<head>
<meta property="al:ios:url" content="myUrlScheme://myPath” />
<meta property="al:ios:app_store_id" content="myAppAppleId" />
<meta property="al:ios:app_name" content="myAppName" />
<meta property="al:web:should_fallback" content="false" />
<meta property="og:title" content=“myTitle” />
<meta property="og:url" content="myUrl" />
<meta property="og:type" content="article" />
</head>
When I open the app link from Facebook, it opens the native app if it is installed, otherwise it asks to go to the App Store, just like the documentation says.
If I remove "al:web:should_fallback=false", it will ALWAYS open the website in the browser, no matter if the native app is installed or not.
What I want is to open the website if the app is not installed, or open the app if it is installed. Is there any way I can achieve that ?
The iPhone is running iOS 9.3.5 and Facebook v63
I have a mobile app build with phonegap (cordova) and the app is live on app store, but this new feature of iOS10 beta:
To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.
make the app zoomable and it totally broke the design of the app when zoomed.
Maybe this is a feature for websites on mobile (or not), but I want to be able to disable this for a hybrid mobile app
This is how the viewport looks like in index.html
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=medium-dpi, width=device-width, height=device-height" />
Is there a known solution to resolve this problem for the new iOS that will be released soon?
I am using WkWebView and
<engine name="ios" spec="~3.9.2" />
<preference name="phonegap-version" value="cli-5.2.0" />
UPDATE
I updated phonegap to version 6.3.0 and ios platform version to 4.1.1 and I have the same error.
use user-scalable=no as the following code :
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
This works for me:
document.addEventListener('gesturestart', (event) => { event.preventDefault(); }, false);
Answer found:
https://github.com/apache/cordova-ios/issues/1054
Here is a solution for iOS 10+
// stop ios bounce and zoom
document.ontouchmove = event => {
event.preventDefault();
};
This will stop move events reaching the root element/browser
I am trying to use Facebook's new App Links metadata to cause the Facebook app to launch my native app on iOS. So far, it isn't working.
This is what I've done:
1 . I created a file called test.html with the following code:
<html>
<head>
<meta property="al:ios:url" content="MyAlScheme://test" />
<meta property="al:ios:app_store_id" content="123456" />
<meta property="al:ios:app_name" content="My App Name" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<h1>Test</h1>
Launch App
</body>
</html>
(* 123456 and My App Name were replaced with the real app name and ID)
2 . In my XCode project, I registered the Scheme MyAlScheme in the app's plist. (Note: Proof that this scheme works is below).
3 . I sent a link to the aforementioned test.html to another user via Facebook Chat.
4 . I clicked on that link and the web page opened, though I am expecting the app to launch instead.
5 . With the web page opened, I clicked on the "Launch App" link. The app opens up (as expected), proving the the custom scheme is properly registered.
What am I missing?
Answering my own question:
It appears that this is a limitation, specifically, of the iOS Facebook Messenger app. It doesn't support App Links yet.
The same link, if accessed through the main iOS Facebook app (for example, if you post the link on the wall then click on it from the feed), works correctly: The Facebook app creates a special button on the status bar which allows you to open the link in the native app.
Currently, the way this works is that the webview is loaded immediately, but when an AppLink is detected, a native button is shown that allows the user to jump directly into the app. Things are being tweaked a little bit so you may see a slightly different user experience, but the general pattern should be immediate webview + native UI to jump straight into the app.
I have a mobile-optimized website with the necessary code to it available as a webapp. This site includes links to place calls and send emails. This has worked for years on iOS. However, it no longer works on iOS 7. Here's a stripped down version of the code. I verified that after "adding to homescreen", opening the webapp, and tapping the phone number, it works in iOS 6 but not iOS 7.
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
(212) 555-5555
</body>
</html>
Is this a bug in iOS 7? Or do I need to add something new for it to work in iOS 7?
When I look at the RFC's (# 2806, which defines the "tel:" URL scheme), I never see parenthesis characters in the example URL's.
And in the "Phone Links" example in Apple's URL Scheme Reference, Apple shows how they use HTML that looks like: "1-408-555-5555".
My guess is that - as of iOS 7 - Apple has tightened up a bit on how "tel:" URL's can be defined (e.g. parenths might require escaping or proper encoding).
So try getting rid of the parenths and see if you have better luck.
IOS7 can not link from webapps, you can't open URL's, App Store, Youtube either.
So it's not a "tel:" issue :-)
But they do work if you remove:
And make it just a home screen bookmark, not a webapp.
Mac