Skip to content

videoCSS.md

Latest commit

 

History

History
37 lines (26 loc) · 1.59 KB

videoCSS.md

File metadata and controls

37 lines (26 loc) · 1.59 KB

<video> CSS

The plugin places a native UIView on top of all those HTML <video> elements in which a WebRTC MediaStream has been attached.

The plugin inspects the CSS properties of the <video> element and uses them to make the video UIView behave similary.

Supported CSS properties are:

  • display
  • opacity
  • visibility
  • padding
  • z-index: Useful to place a video on top of another video.
  • object-fit
  • -webkit-transform: scaleX(-1): Useful for horizontal mirror effect.

Note: if the specified z-index is < 0 (that, is, the video elements will be positioned "behind" the web view), you should specify the <body> background-color as transparent so the video element will be seen through the web view. This makes it possible to position HTML elements on top of the native video elements.

Quirks

Position of the Webview element does not match the corresponding video element

In some cases iOS adds offsets to the Webview element. As a result the coordinates between the video element and it's corresponding Webview element are unsync. This happens when the status bar is shown. This can be fixed through disabling the statusbar in two ways:

  <key>UIViewControllerBasedStatusBarAppearance</key>
  <false/>
  <key>UIStatusBarHidden</key>
  <true/>