Attempt fix for Safari on iOS

src/components/networked-video-player.css

 :local(.video) {
-  height: 100px;
+  /* 1x1px so that Safari on iOS allows us to autoplay the video */
+  width: 1px; height: 1px; /* toggle to show debug video elements */
   background: black;
-  margin: 5px;
 }
 
 :local(.container) {
     position: absolute;
     bottom: 0;
     display: flex;
-    visibility: hidden; /* toggle to show debug video elements */
+    /* 1x1px so that Safari on iOS allows us to autoplay the video */
+    width: 1px; height: 1px; /* toggle to show debug video elements */
 }

src/components/networked-video-player.js

@@ -32,10 +32,12 @@ AFRAME.registerComponent("networked-video-player", {
 
     const v = document.createElement("video");
     v.id = `nvp-video-${ownerId}`;
+    // muted and autoplay so that more restrictive browsers (e.g. Safari on iOS) will actually play the video.
+    v.muted = true;
+    v.autoplay = true;
     v.classList.add(styles.video);
     v.srcObject = new MediaStream(stream.getVideoTracks()); // We only want the video track so make a new MediaStream
     container.appendChild(v);
-    v.play();
 
     this.videoEl = v;