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 controls = true and  playsinline attribute to the video tag in order to play <video> elements without fullscreen mode.


Set the playinline attribute and controls=true to the <video> tag.

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.controls = true;
  video.setAttribute('playsinline', true); // The required attribute to work.
  attachMediaStream(video, stream);


<video id="myvideo" controls="true" playsinline autoplay muted></video>