Как растянуть YouTube-видео на всю ширину страницы сайта

Чтобы видео с YouTube растягивалось на всю ширину страницы нужно код видео обернуть в div и назначить класс, а потом прописать стили.

Пример HTML:



<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/a6SnwsyjDbQ" frameborder="0" allowfullscreen></iframe>
</div>

</div>

Пример CSS:



.embed-responsive-16by9 {
  padding-bottom: 56.25% !important;
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-16by9 {

padding-bottom: 56.25% !important;

}

.embed-responsive {

position: relative;

display: block;

height: 0;

padding: 0;

overflow: hidden;

}

.embed-responsive .embed-responsive-item,

.embed-responsive iframe {

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

border: 0;

}

Пример результата вставки видео с YouTube ▼

Как растянуть YouTube-видео на всю ширину на сайте