.video-embed {
  position: relative;
  width: 100%;
  box-shadow: rgba(0, 0, 0, .45) 0px 25px 20px -20px;
  aspect-ratio: var(--video-ratio, 16 / 9);
  margin-top: 24px;
  margin-bottom: 24px;
}

.video-embed iframe,
.video-embed object,
.video-embed embed,
.video-embed > * {
  position: relative;
  display: block;
  border: 12px #FFF solid;
  width: 100%;
  height: 100%;
  margin: 0;
}

.video-embed:before {
  content: " ";
  position: relative;
  z-index: 3;
  display: block;
  opacity: 0.7;
  width: 100%;
  height: 69px;
  margin-bottom: -50px;
  background: url(../images/bout-de-scotch_1x.png) no-repeat center/contain;
  background-size: contain;
}

html.webp .video-embed:before {
  background: url(../images/bout-de-scotch_1x.webp) no-repeat center/contain;
  background-size: contain;
}

@media (max-width: 576px) {
  .video-embed:before {
    height: 50px;
    margin-bottom: -35px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .video-embed:before {
    background: url(../images/bout-de-scotch_2x.png) no-repeat center/contain;
    background-size: contain;
  }

  html.webp .video-embed:before {
    background: url(../images/bout-de-scotch_2x.webp) no-repeat center/contain;
    background-size: contain;
  }
}