I am trying to embed a YouTube video in a web page loaded in a WKWebView
.
Here's the page source:
let html = """
<html><head>
<title>YouTube Video</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=no, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
Here is an embedded youtube video: <br/>
<iframe src="https://www.youtube.com/embed/oR-6N1Dc_zc?modestbranding=1&rel=0" frameborder="0" allowfullscreen></iframe>
<iframe src="https://player.vimeo.com/video/270611565" width="640" height="360" frameborder="0" allowfullscreen></iframe>
</body>
</html>
"""
Configuration of the WKWebView is close to default (allowsInlineMediaPlayback
is enabled). The web page is loaded with webView.loadHTMLString(html, baseURL: nil)
.
The fullscreen mode button in YouTube player is greyed out. When I click it, the following message is displayed: "Your browser does not support full screen.":
I get the same message if I use UIWebView
instead. Fullscreen mode seems to work for an embedded Vimeo video (although the Vimeo player just seems to ignore the allowfullscreen
attribute of the iframe
) and a video embedded using the <video>
tag. When I load a video from the YouTube website, fullscreen mode works (although it looks more like some kind of emulation, not like the native fullscreen mode).
The question is: why is the fullscreen mode disabled and is there a way to enable it?
You can solve the issue by disabling inline media.
let webViewConfiguration = WKWebViewConfiguration()
webViewConfiguration.allowsInlineMediaPlayback = false
WKWebView(frame: .zero, configuration: webViewConfiguration)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With