.youtube-container {
  display: block;
  margin: 20px auto;
  width: 100%;
  max-width: 600px;
}

.youtube-player {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 298px;     /* fixed height, same as before */
  cursor: pointer;
}

/* Thumbnail now comes from YouTube (set in JS, not stored locally) */
img.youtube-thumb {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  margin: auto;
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Play button overlay (still using your play.png asset) */
div.play-button {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
  background: url("/youtube/play.png") no-repeat center center;
  background-size: contain;
}

#youtube-iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

/* Make the injected thumbnail block-level so it defines height */
.youtube-placeholder,
.youtube-placeholder img.youtube-thumb {
  display: block;
  width: 100%;
}

/* If you use a container with max-width, give it intrinsic height via aspect ratio */
.paper-figure .youtube-container {
  aspect-ratio: 16 / 9;
  height: auto;
}