Формат кадра Iframe 16: 9 с фиксированной высотой - PullRequest
Новая
       2

Формат кадра Iframe 16: 9 с фиксированной высотой

0 голосов
/ 22 января 2019

Я пытаюсь добавить видео YouTube на свой веб-сайт, но изо всех сил стараюсь получить соотношение сторон 16: 9 на моем фрейме. Моя проблема в том, что я работаю с фиксированной высотой, но я гибок в своей ширине. Поскольку это довольно необычный случай, я не могу найти решение своей проблемы ни в какой документации, ни в других вопросах StackOverflow. Все они имеют фиксированную ширину, а затем используют padding-bottom: 56,25%; с высоты.

Я использую классы начальной загрузки для стилизации своего HTML, но я все еще применяю тег стиля здесь и там, чтобы настроить дизайн, поэтому код, который я включил ниже, может показаться немного грязным. Рядом с iframe (справа) должен быть еще один элемент div, который отмечен в коде id = "text-next-to-iframe"

Я пытался использовать указанный метод включения определенного отступа в div, окружающий мой iframe, а затем установив ширину и высоту фактического iframe равными 100%, как вы бы сделали в кенариуме с фиксированной высотой, но это не сработало , Я также пытался установить высоту своего iframe на 29vh (высота, которая мне нужна) и установить ширину для различных значений vw (пытаясь найти правильное значение), но в итоге iframe вообще не показывался с оба метода. 

<body style="height: 100vh; overflow: hidden;">
    <div class="container-fluid float-md-right mt-2" style="max-width: 79%; height: 100vh;">
        <div class="d-flex float-left mt-2 col-md-9" style="height: 29vh; border: 1px solid black;">
            <iframe id="YTPlayer" height="100%" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>Video wird geladen...</iframe>
            <div id="text-next-to-iframe">  
                <h2>
                    <img alt=" " src="./includes/images/BAUMorg.png" style="width: 10%;"/>
                    BAUMorg
                </h2>
                <a class="btn btn-outline-danger" href="http://www.youtube.com/channel/UC-HWN5WLWQPPIHB3dwQ9atQ?sub_confirmation=1" role="button" target="_blank" style="width: 10vw; font-size: 25px; align: center;">
                    <i class="fa fa-youtube-play"></i>
                    Subscribe
                </a>
            </div>

1 Ответ

0 голосов
/ 22 января 2019

Я надеюсь, что не понял этого вопроса, но надеюсь, это поможет.

Чтобы настроить соотношение сторон, вы хотите разделить ширину экрана или контейнера на 16 и разделить полученный результат на 9, чтобы получить свой рост.

ширина экрана = ширина контейнера / 16

screenHeight = screenWidth * 9

Vh относится к 1% области просмотра, и вы сказали, что вам нужно 29vh для вашего роста. Поэтому нам нужно сделать это в обратном порядке, чтобы получить противоположность (ширина).

screenHeight = 29vh

screenWidth = (screenHeight / 9) * 16

, что равно 51,5, если мы сбрасываем последние 5 и округляем вверх, это 52vh.

Надеюсь, это поможет. 

<style>
iframe{
      width: 52vh;
      height: 29vh;
    }
</style>

<iframe id="YTPlayer"  src="https://www.youtube.com/embed/t2ByLmLnYJ8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...