.ytctl{
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.ytctl__btn{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ytctl__thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ytctl__play{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
}

.ytctl__play:before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%,-50%);
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #fff;
}

/* El iframe (cuando ya está cargado) ocupa el mismo espacio */
.ytctl iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Compatibilidad con el wrapper del bloque "Incrustar" de WP (ratio por ::before) */
.wp-block-embed__wrapper{
  position: relative;
}
.wp-block-embed__wrapper > .ytctl{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}