@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, а при изменении размера экрана оно уменьшалось
  • Вопрос задан
  • 936 просмотров
Пригласить эксперта
Ответы на вопрос 2
@stoik_kpd
< 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: нужная высота}}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы