Wkwebview Mac Browser Enable Fullscreen Html5?

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 unav

Solution 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.

Solution 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

Solution 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

@interfaceWKPreferences ()
-(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
"""

Solution 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.