Displayed on the page is an HTML Video tag, which streams a video from the speaker (WebRTC).
<div id="remoteVideoContainer">
<video id="remotevideo" autoplay="autoplay" controls="" loop="loop" preload="true"
height="500" width="100%">
</video>
</div>
Here is the corresponding CSS:
video {
display: inline-block;
vertical-align: baseline;
}
Upon updating Chrome to version 67.0.3396.87, I encountered a strange issue - a black box (or two) that adjusts its size based on the window size (sometimes it disappears for certain sizes). There is also a gap in full screen mode. What could be causing this problem? Here is how it looks in inline mode: https://i.sstatic.net/lBKPF.png
And here is how it appears in full screen: https://i.sstatic.net/BKGFH.jpg
This problem did not exist in earlier versions of Chrome and is not present in other browsers.