/* inline-block on the baseline, so the box matches the iframe it replaces
   including the descender gap an inline element leaves beneath it. */
.ihd-yt{position:relative;display:inline-block;vertical-align:baseline;aspect-ratio:16/9;width:100%;background:#000;overflow:hidden}
.ihd-yt__btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:none;display:block}
.ihd-yt__poster{width:100%;height:100%;object-fit:cover;display:block}
.ihd-yt__play{position:absolute;top:50%;left:50%;width:68px;height:48px;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.72);border-radius:12px;transition:background .15s ease}
.ihd-yt__play::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.ihd-yt__btn:hover .ihd-yt__play,.ihd-yt__btn:focus-visible .ihd-yt__play{background:#f00}
.ihd-yt__btn:focus-visible{outline:3px solid #00e5ff;outline-offset:2px}
.ihd-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (prefers-reduced-motion:reduce){.ihd-yt__play{transition:none}}