Делаем адаптивное видео на сайте средствами CSS

       HTML и CSS      html & css    адаптивность      684    
Как сделать адаптивное видео на сайте

Для того, чтобы сделать видео (обычно это код, вставляемый на сайт) на сайте адаптивным, будем использовать стили CSS

HTML

<div id="video-responsive">
	<iframe width="560" height="315" src="ссылка на видео" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>  
</div>

CSS

.video-responsive { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow:hidden; 
} 

.video-responsive iframe, 
.video-responsive object, 
.video-responsive embed {
  position: absolute; 
  top: 0; 
  left: 0; 
 	width: 100%;
  height: 100%; 
}
Комментарии временно оключены

Поиск

Популярное