Рамка для постера встроенного видео на YouTube больше, чем видео

Question

Я встраиваю видео YouTube на страницу HTML.Я хочу, чтобы видео отображалось как можно больше в окне браузера.Вот CSS, который я использую для встроенного iframe:

iframe {
  position: absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  overflow: hidden;
}

Когда видео воспроизводится, оно хорошо вписывается в окно, сохраняя соотношение сторон и показывая пустое пространство сверху и снизу или слева- и вправо, как я и ожидал.

Однако исходное изображение плаката полностью заполняет окно.Я бы хотел настроить его высоту и ширину так, чтобы он имел те же размеры и положение, что и видео.

Я думал, что смогу получить доступ к элементам видеофрейма видео, чтобы узнать размеры видео.Однако, когда я использую document.querySelector("iframe").contentWindow.document, я получаю предупреждение об ошибке, что доступ к рамке перекрестного источника заблокирован.

Как я могу определить соотношение сторон видео, чтобы я мог установить размерыiframe правильно?

Answer 1

Я нашел решение.Однако это означает предоставление жестко запрограммированных значений для размеров видео.

На YouTube я щелкаю правой кнопкой мыши, чтобы вызвать «Статистика по ботаникам» и отмечаю Current / Optimal Res (например: 1280x720 @30).В HTML я предоставляю соответствующую информацию в виде --width и --height переменных CSS:

HTML:

<iframe style="
          --width:1280;
          --height:720;
        "
        src="https://www.youtube.com/embed/fUyU3lKzoio"
        frameborder="0"
        allowfullscreen>
</iframe>

В CSS я устанавливаю width и height до полного размера окна (с использованием vw и vh единиц, которые возвращают полный доступный размер на смартфонах и планшетах).Я также ограничиваю max-height и max-width, чтобы обеспечить соблюдение соотношения сторон видео:

CSS:

iframe {
  width:  100vw;
  height: 100vh;
  max-height: calc(100vw / var(--width) * var(--height));
  max-width:  calc(100vh * var(--width) / var(--height));
}