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

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

Как растянуть YouTube-видео на 100%

Пример HTML:

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

</div>

Пример CSS:

</p>
<p>.embed-responsive-16by9 {<br />
  padding-bottom: 56.25% !important;<br />
}</p>
<p>.embed-responsive {<br />
  position: relative;<br />
  display: block;<br />
  height: 0;<br />
  padding: 0;<br />
  overflow: hidden;<br />
}</p>
<p>.embed-responsive .embed-responsive-item,<br />
.embed-responsive iframe {<br />
  position: absolute;<br />
  top: 0;<br />
  bottom: 0;<br />
  left: 0;<br />
  width: 100%;<br />
  height: 100%;<br />
  border: 0;<br />
}</p>
<p>

.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 ▼

Понравилась статья?

Похожие публикации