<div class="wrap">
  <div class="frame">
    <div class="frame-inner">
      <iframe width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?list=TLGG9A81gaxbq3wwMTA4MjAyMQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

html,
body {
  padding: 0;
  margin: 0;
}

body {
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.wrap {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
.frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  border: 15px solid transparent;
  border-radius: 12px;
  box-shadow: 0 -1px white, 0 -1px 0 1px #bbb, 0 2px 0 1px #aaa,
    0 2px 10px 1px rgb(0 0 0 / 20%);
  overflow: hidden;
  background: #bbb;
}
.frame-inner {
  padding-top: 56.25%;
  height: 0;
}
.frame iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}