<div class="block">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Xvk6TVTqtFA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.block {
  width: 560px;
  height: 315px;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 315px;
    height: 315px;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    box-shadow: 0 0 0 1000px black;
    pointer-events: none;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.