Disabling Auto-Play in Full Screen on Ios

Disabling auto-play in full screen on iOS

Playing a video inline requires two prerequisites:

1. Setting the configuration
2. Providing a correctly formatted link

1. Setting the configuration

The configuration of the WKWebView has needs to be set while initialising. Modifying allowsInlineMediaPlayback at a later point will not work:

let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true

let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height), configuration: configuration)

view.addSubview(webView)

2. Providing a correctly formatted link

In order for the web view to know that the video should start playing inline the appropriate URL parameter needs to be set.

For this you simply have to append ?playsinline=1.

Example:

webView.load(URLRequest(url: URL(string: "https://www.youtube.com/watch?v=OYbXaqQ3uuo?playsinline=1")!))

Disable auto fullscreen of YouTube embeds on iPhone

Add playsinline=1 paramerer to the embed url. Add ? or & before as appropriate; ? if the only paramerter, & to concatenate with other params.

Example:

<iframe
  src="https://www.youtube.com/v/VIDEO_ID?playsinline=1">
</iframe>

From YouTube iFrame Player API:

This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Valid values are:
0: This value causes fullscreen playback. This is currently the default value, though the default is subject to change.
1: This value causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE.

How to deactivate the IOs fullscreen mode for html5 video tag

Use the video source as attribute inside of the video-tag instead of using the source-tag:

     <video
        playsInline
        id="video"
        src={props.video}
      >
        Your browser does not support the <code>video</code> element.
     </video>

disable fullscreen mode on html video on mobile devices

Use this code for mobile browsers:

<video autoplay loop muted controls webkit-playsinline playsinline>
    <source src="file.mp4" type="video/mp4">
</video>

Using webkit-playsinline and playsinline make Mobile browsers play the video right where it is instead of the default, which is to open it up full-screen while it plays.

VideoJS - Disable auto fullscreen after pressing play button

To preserve inline playing, add playsinline attribute to video tag.

---

Related Topics