Адаптивный блок с видео, как сделать?

Question

[ruplis]

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

<div class="a1">
<iframe width="500" height="300" src="https://www.youtube.com/embed/8mK5aY5YOCc" frameborder="0" allowfullscreen></iframe>
</div>

<style>
.a1 {background: #FFFFFF; max-width: 500px; max-height: 300px;}
iframe {width: 100%;}
</style>

если тут прописываю iframe {width: 100%; height:100%;}, то видео становится адаптивным, но высота видео становится на весь экран, а мне так не надо, помогите, что нужно подправить, что бы высота видео было 300px, а при изменении размера экрана оно уменьшалось

Answer 1

[Anna_BS]

codepen

Comments

[ruplis]

спасибо, но я этот способ на всех сайтах уже нашел по адаптивности видео, он мне не подходит(((

Answer 2

[Laid]

< div class="a1">
< iframe width="100%" height="100%" src="https://www.youtube.com/embed/8mK5aY5YOCc" frameborder="0" allowfullscreen>< / iframe>
< /div >

.a1 {background: #FFFFFF; max-width: 500px; height: 300px;}
@ media (max-width: ширина при которой видео начинает растягиваться px) {.a1 {height: нужная высота}}