lite-youtube {
  background: #000;
  contain: content;
  display: block;
  max-width: 720px;
  position: relative;
}

/* responsive iframe with a 16:9 aspect ratio (thanks https://css-tricks.com/responsive-iframes/) */

lite-youtube::after {
  content: '';
  display: block;
  padding-bottom: calc(100% / (16 / 9));
}

lite-youtube > iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

/* YT's actual play button svg */

lite-youtube > a,
lite-youtube > button {
  cursor: pointer;
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

lite-youtube > a > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

lite-youtube > a::after,
lite-youtube > button::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='red' fill-opacity='.8' d='M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.6c-3 .7-4.6 3.2-5.4 6.1a89.6 89.6 0 000 32.5c.8 3 2.5 5.5 5.4 6.3C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.6c3-.7 4.6-3.2 5.4-6.1C68 35 68 24 68 24s0-11-1.5-16.3z'/%3E%3Cpath fill='%23fff' d='M45 24L27 14v20'/%3E%3C/svg%3E");
  display: block;
  width: 68px;
  height: 48px;
  position: absolute;
  inset: calc(50% - 68px / 2) calc(50% - 48px / 2) auto auto;
  transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
}

lite-youtube > button {
  background: #000 50% 50% / cover;
  border: none;
}

/* gradient */

lite-youtube button::before {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAQAAAC58SIOAAAAaklEQVR42nWOUQrAMAhD1e7+B9kZ1zqYKAk6yMfLa8Ca3CbbxL+cTJgNNeDhTZmdQXb24/KAPNNFjDf2CQSMJGCVViveAKuy1AZYFaCqcrVkA4NgGeTKYlg/Jvhio/w6LuvQNV1U3sS31wvH7lU36biAMgAAAABJRU5ErkJggg==')
    top repeat-x;
  content: '';
  display: block;
  height: 60px;
  padding-bottom: 50px;
  position: absolute;
  top: 0;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
  width: 100%;
}

lite-youtube > button::after {
  filter: grayscale(100%);
}

lite-youtube:hover > button::after,
lite-youtube button:focus::after {
  filter: none;
}