Я пытаюсь вставить отзывчивый iframe на создаваемую мной страницу.
Я следовал учебному пособию здесь , и само видео отзывчиво, но "padding-bottom" : 56,25% "часть, которая регулирует соотношение сторон, влияет на другой контент на моей странице ( посмотрите, что я имею в виду здесь )
Я пытался погуглить мою проблему, но ни одно из разрешений не кажется работать на меня. Кто-нибудь знает, что может происходить или как я могу это исправить?
Заранее спасибо! Я схожу с ума.
РЕДАКТИРОВАТЬ: кто-то помог мне решить эту проблему. Оказывается, когда я пытался изменить ширину показа видео, я не должен был делать это в самом iframe css. Вместо этого я сделал обертку для iframe.
См. Рабочий код здесь
<div class="ytvideo">
<iframe height="315" width="560" src="https://www.youtube.com/embed/KZt5j7gKRww" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.ytvideo {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
border: 0;
overflow: hidden; }
.ytvideo iframe {
position: absolute;
top:0;
left: 0;
width: 90%;
height: 90%; }