Как создать страницу, адаптивную по высоте, а не по ширине? ⇐ CSS

[Гость]

Я пытаюсь создать очень простую страницу для игры, которую буду вставлять с помощью iframe.

Я хочу, чтобы скорость реагирования работала точно так же, как на этой странице: https://rajeevbasu.com/projects/wil3d/index.html

В приведенном выше примере размер игры и текста идеально изменяется, чтобы всегда соответствовать высоте вашего экрана, а когда окно становится совсем маленьким, в нем просто отображается игра (что имеет смысл)

Может ли кто-нибудь помочь мне понять, как сделать что-то очень похожее на приведенный выше пример? Моя игра будет встроена с помощью iframe и имеет размер 3:4.

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

Я экспериментировал с этим примером, но пока безуспешно: https://jsfiddle.net/mjgLcp9q/
div>
https://www.youtube.com/embed/j1qtsLfZWWQ
.Response-video { положение: относительное; отступ снизу: 56,25%; /*Устанавливается на основе соотношения сторон видео. Если установлено соотношение сторон 16:9 нижний отступ до 56,25%. Если соотношение сторон видео составляет 4:3, установите для поля отступы значение 75% */ отступ сверху: 35 пикселей; /*Высота заголовка видео на YouTube*/ высота: 0; /* Не требуется, поскольку iframe получает высоту от нижнего отступа */ переполнение: скрыто; /*скрывается, если какое-либо видео выходит за пределы контейнера*/ } .cta { позиция: абсолютная; ширина: 30 пикселей; высота: авто; правильно: 0; внизу: 0; } .response-video iframe { ширина: 100%; /*убедитесь, что видео занимает 100% ширины*/ высота: 100%;/*убедитесь, что видео занимает 100% высоты*/ позиция: абсолютная; /*обязательно, поскольку высота контейнера равна 0*/ слева: 0; /* исправляем позиционирование */ верх: 0; /* исправляем позиционирование */ }