<div class="container">
  <p>When the video goes to fullscreen mode it's poster doesn't cover the entire viewport so you can see the ::backdrop:</p>

  <video controls src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/h264.mov" poster="https://picsum.photos/600/400"
        width="100%">
      </video>
 

</div>

video {
  display: block;
  width: 100%;
  margin: 2rem 0;
}

video::backdrop {
  background: hsla(0, 0%, 0%, .5);
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 100%/1.7 system-ui;
  color: #646464;
}

.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem;
}

@supports not selector(::backdrop) {

  body::before {    
    box-sizing: border-box;
    content: "⚠️ Your browser doesn't support ::backdrop";
    display: block;
    max-width: 72rem;
    margin: auto;
    color: #f44336;
    font-weight: bold;
    padding: 2rem 2rem 0;
  }
}