Адаптивный iframe с использованием Bootstrap

102

Я использую Bootstrap.

У меня есть текст, содержащий 2 или 3 встроенных видео на основе iframe.

Эти данные берутся из базы данных.

Как сделать эти фреймы адаптивными?

Пример кода:

<div class="row">

   <div class="col-lg-12 col-md-12 col-sm-12">

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>


     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe> 

   </div>

</div>

Это динамические данные. Как мне сделать его отзывчивым?

twitter-bootstrap iframe New Co
источник
возможный дубликат создания
адаптивного
1
Хорошо отметить, какая версия Bootstrap. Я ответил на это двумя вариантами.
Кристина

Ответы:

215

Опция 1

С помощью Bootstrap 3.2 вы можете обернуть каждый iframe в оболочку для адаптивного встраивания по вашему выбору:

http://getbootstrap.com/components/#responsive-embed

<!-- 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>

Вариант 2

Если вы не хотите оборачивать свои фреймы, вы можете использовать FluidVids https://github.com/toddmotto/fluidvids . См. Демонстрацию здесь: http://toddmotto.com/labs/fluidvids/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>
Кристина
источник
2
невозможно уменьшить высоту iframe. Я перешел из класса 100%в 80%класс .embed-responsive iframe. Но дает пустое место. после видео. Как избежать этого пространства.
SatyaTNV
НАКОНЕЦ это работает отлично! Было бы неплохо включить обязательное <p>Your browser does not appear to support iframes</p>между iframeтегами, но мне интересно, актуально ли это в наши дни ... еще раз спасибо, многие (хакерские) решения были близки, но это идеально!
svenevs
1
к Варианту 1: URL-адрес документов изменен на getbootstrap.com/docs/3.3/components/#responsive-embed
Александр Шмидт,
используйте одно соотношение сторон и включите это, чтобы заставить его работать - >> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css "> <script src = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/… > и внутри тега iframe -> frameborder = "0" style = "overflow: hidden; переполнение-x: скрыто; переполнение-y: скрыто; высота: 100%; ширина: 100%; позиция: абсолютная; верх: 0px; слева: 0px; вправо: 0 пикселей; внизу: 0px; "height =" 100% "width =" 100% "
Кришна
24

Пожалуйста, проверьте это, я надеюсь, это поможет

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>
Мохамед
источник
Спасибо! Тьфу наконец-то что-то простое, что действительно работает.
Fatimaezzahra Rarhibou
14

Лучшее решение, которое отлично сработало для меня.

Вам необходимо: Скопировать этот код в свой основной файл CSS,

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px; overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

а затем поместите свое встроенное видео в

<div class="responsive-video">
    <iframe ></iframe>
</div>

Это оно! Теперь вы можете использовать адаптивные видео на своем сайте.

солнечный удар
источник
1
padding-bottom: 56.25%;делать какие-то странные вещи
Emidomenge
9

Итак, youtube выдает тег iframe следующим образом: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>

В моем случае я просто изменил его на width = "100%", а остальное оставил как есть. Это не самое изящное решение (ведь в разных устройствах получаются странные соотношения) Но само видео не деформируется, только кадр.

Хулиан
источник
Это так отзывчиво? Если да, сохранит ли он соотношение сторон?
Csaba Toth
Красиво и просто. Сработало у меня! Спасибо!
Джо
У меня тоже работает. Сохраните предложенную высоту (в вашем случае 315), но измените ширину на «100%». Гибко масштабируется и хорошо работает с классами столбцов начальной загрузки.
BAERUS
4

Вариант 3

Чтобы обновить текущий iframe

$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');
Ратха Хин
источник
0

Работаем в августе 2020 г.

использовать это

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

использовать одно соотношение сторон

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

в параметрах использования iframe

 <iframe class="embed-responsive-item" src="..."
  frameborder="0"
    style="
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    "
    height="100%"
    width="100%"
  ></iframe>
Кришна
источник