Source

Вгражда

Създавайте адаптивно видео или вграждане на слайдшоу въз основа на ширината на родителя, като създавате вътрешно съотношение, което се мащабира на всяко устройство.

относно

Правилата се прилагат директно към <iframe>, <embed>, <video>и <object>елементи; по избор използвайте явен клас наследник, .embed-responsive-itemкогато искате да съответствате на стила за други атрибути.

Професионален съвет! Не е необходимо да включвате frameborder="0"във вашия <iframe>s, тъй като ние заместваме това вместо вас.

Пример

Обвийте всяко вграждане като <iframe>в родителски елемент с .embed-responsiveи пропорция. Не е .embed-responsive-itemстрого задължително, но ние го насърчаваме.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Съотношения на страните

Съотношенията могат да бъдат персонализирани с модификаторни класове.

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>