This guide is to allow your iOS 11 Safari mobile browser to display <video> element properly:


When you try your app on iOS 11 Safari, peers get connected but the <video> element shows only as a black box.


iOS changed its policy regarding <video> elements since iOS 10. According to iOS <video> elements policies, <video> elements require the "playsinline" attribute to be set to true in order to play <video> elements without fullscreen mode.


Set the "playinline" attribute to true for the <video> element.

Sample implementation:

Below is an example for the Web SDK "incomingStream" event to implement the above policy to solve it:

skylink.on('incomingStream', function (peerId, stream, isSelf) {
  var video = document.createElement('video'); = peerId;
  video.muted = isSelf;
  video.autoplay = true;
  video.setAttribute('playsinline', true); // The required attribute to work.
  attachMediaStream(video, stream);