title: Fix black rectangle for HTML video element
body: <p>I'm implementing WebRTC video chat. I want to implement the following case:</p>
  
  <p>By default video element has background-image via css and if there are no video input then user see his (or interlocutor's) avatar:</p>
  
  <p>No video expected result:
  <img src="https://i.stack.imgur.com/nSBFI.png" alt="No video expected result"></p>
  
  <p>No video actual result:
  <img src="https://i.stack.imgur.com/4nwGV.png" alt="No video actual result"></p>
  
  <p>As you can see from the screenshots I have black rectangles above my fancy backgrounds. I want to make this ugly black rectangle transparent and keep my video's backgrounds visible.</p>
  
  <p>Actually it will be awesome to resolve the problem without introducing any additional markup.</p>
  
  <p>Appreciate your help =)</p>
  
  <p>Update: </p>
  
  <p>"No video" means that user/users don't have web cams and stream has only audio track.</p>