How can I enable fullscreen mode for HTML5 videos within WKWebView (or WebView) on macOS?

Help & Support
1

I’m using macOS and frequently encounter situations where I need to enter fullscreen mode while watching videos, whether it’s for work-related tasks or leisure. However, I’m unsure about the exact steps to achieve this on my Mac. I’d greatly appreciate guidance from a helpful community member who can provide clear instructions on how to activate fullscreen mode for videos on macOS.

1 Like
2

On macOS, enabling fullscreen mode for HTML5 videos requires a number of steps to correctly handle user interaction and permissions.

Here are the steps to follow:

1. HTML5 Video Setup

Begin by embedding an HTML5 <video> tag in your webpage’s content. Ensure you include the controls attribute to allow users to manage video playback.

<source src="your_video.mp4" type="video/mp4">
</video>

2. JavaScript Implementation

Use JavaScript code to enable the fullscreen feature. When a user clicks the fullscreen button, record the user’s action by adding an event listener to the video element.

<script>
   const video = document.querySelector('video');
   video.addEventListener('click', () => {
      if (video.requestFullscreen) {
         video.requestFullscreen();
      } else if (video.webkitRequestFullscreen) { // For Safari
         video.webkitRequestFullscreen();
      }
   });
</script>

3. Configuring an app

Make sure your program is properly configured to support web content in fullscreen mode. Use these guidelines based on whether you’re using WKWebView or the old WebView:

1. For WKWebView

Create a WKWebView object with the proper settings in the view controller of your project. Create a delegate that complies with WKUIDelegate to handle requests for any modifications to fullscreen.

2. For WebView (deprecated)

Create a WebView object in your app’s view controller that is similar to WKWebView. To handle requests for any changes to fullscreen, set a delegate that complies with WebUIDelegate.

4. Permission Considerations

Ensure that your app’s Info.plist file includes the necessary privacy usage descriptions if your HTML content utilizes audio or video. Include NSMicrophoneUsageDescription and NSCameraUsageDescription keys to adhere to privacy requirements and access media devices.

For more information, you can refer to Apple’s official documentation.