WKWebView Mac Browser Enable fullscreen html5?

Question

I made a simple browser with Swift last version and xcode 8.3.3. I want to be able to enter in fullscreen when there is an html5 video (like on youtube). I get "full screen is unavailable" on youtube right now. Same problem with the old WebView... on iOS it work.

EDIT. Maybe it's just not possible. I tried to look at JavaFX WebView and WPF WebBrowser and they have the same limitation. Actually one guy was able to allow full screen for a youtube video on WPF WebBrowser but only by creating a full html page: Playing youtube in full screen in WebBrowser control

And of course I cannot create a webpage for every video in a page (at least I don't know how, if you know please tell me).

---

ORIGINAL MESSAGE: I made a simple browser with Swift last version and xcode 8.3.3. Everything is working but I'm not able to activate plugins like I can do with the old WebView. Since I'm on a mac I should be able to activate plugins (I understand that it's not possible on iOS) am I wrong?

Also (and here I got the same problem in the old WebView) there is no way to activate fullscreen for html5 videos (at least I don't know how).

@IBOutlet weak var webView: WKWebView!
let urlString = "http://myurl.com/"
self.webView.load(NSURLRequest(url: NSURL(string: urlString)! as URL) as URLRequest!)
self.webView.configuration.preferences.plugInsEnabled = true

This is the really basic code to get a basic browser working. But there is no option to enable plugin in the Interface Builder for WKWebView and I really don't know how to allow fullscreen for html5 videos (like youtube).

EDIT. Ok I finally found an answer for the plugin part: self.webView.configuration.preferences.plugInsEnabled = true

really easy but it was difficult to understand where to find it I had to go here: https://developer.apple.com/documentation/webkit/webpreferences and take a guess...

Answer 1

To allow WKWebView to use fullscreen HTML you need to access private API's (see https://github.com/WebKit/webkit/blob/master/Source/WebKit/UIProcess/API/Cocoa/WKPreferences.mm#L232-L240) in WKPreferences. Since you're using Swift in your bridging header add:

#import <WebKit/WebKit.h>

@interface WKPreferences ()
-(void)_setFullScreenEnabled:(BOOL)fullScreenEnabled;
@end

And simply call it:

let webView = WKWebView(frame: view.frame)
webView.configuration.preferences._setFullScreenEnabled(true)

If you notice strange resizing of the web view once you exit fullscreen I found that this fixes the issue for me:

webView.autoresizingMask = [.width, .height]
view.addSubview(webView)

webView.translatesAutoresizingMaskIntoConstraints = false
webView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
webView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
webView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
webView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true

Note: Since you're accessing private API this would be rejected on the Mac App Store.

Answer 2

Instead of using private APIs you can do this by changing the property with KVO in the configuration.

Using Swift 5:

let configuration = WKWebViewConfiguration()
configuration.preferences.setValue(true, forKey: "fullScreenEnabled")
let webView = WKWebView(frame: .zero, configuration: configuration)

Tested on macOS 10.15 and 11

Answer 3

The solution posted by @SoneeJohn was clear, but it involved using a bridging header. I'd never manually worked with Objective-C or modified private Swift frameworks before. I didn't know what keywords to use. And, the resources I found seemed more involved and focused on creating an original framework - not altering an existing framework. I don't know if this is the proper implementation, but it got full-screen mode to work in web view.

Steps

There are photos that reference each of the following steps in the next section.

1. Click your "Project" in XCode
2. Click "Add a target"
3. Click "Cocoa Framework"
4. Click "Next"
5. Enter a title into "Product Name"
6. Click "Finish"
7. Click "Add items" in "Linked Frameworks and Libraries"
8. Enter "WebKit" into the "Search"
9. Click "WebKit.framework"
10. Click "Add"
11. Click your "Project.h" file
12. Add the "Import" code from the solution

#import <WebKit/WebKit.h>

13. Add the "Full Screen" code from the solution

@interface WKPreferences ()
-(void)_setFullScreenEnabled:(BOOL)fullScreenEnabled;
@end

14. Import your "Project Framework" into your swift file
15. Implement the "Full Screen" code into your web view

webView.configuration.preferences._setFullScreenEnabled(true)

15. I had to change my user agent to Safari 11 for the full-screen mode to work properly.

webView.customUserAgent = """
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13) AppleWebKit/604.1.31 (KHTML, like Gecko) Version/11.0 Safari/604.1.31
"""

Answer 4

The answer is that there is no answer. No API right now on mac to get fullscreen html5. I tried to make the same app on windows and the current WebView of UWP is able to go fullscreen (the old WebBrowser of WPF is not able to go fullscreen).

I think the only way to get it, it's to submit a feedback to apple.