Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fullscreen mode is disabled for an embedded YouTube video in WKWebView

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.":

video player message

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?

like image 699
Andrii Chernenko Avatar asked Jul 25 '18 16:07

Andrii Chernenko


1 Answers

You can solve the issue by disabling inline media.

let webViewConfiguration = WKWebViewConfiguration()
webViewConfiguration.allowsInlineMediaPlayback = false
WKWebView(frame: .zero, configuration: webViewConfiguration)
like image 112
iamszabo Avatar answered Oct 16 '22 19:10

iamszabo