0

Я вставил код видео с одного видеопортала на сайт. Все бы хорошо, вот только на мобильных устройствах видеозапись отображается СЛИШКОМ громоздкой, можно ли сделать так, что бы на компьютере и на мобильных устройствах видео отображалось разного размера. Может, размер как-нибудь в css можно изменить?

Код:

<iframe width="640" height="384" src="//video.sibnet.ru/shell.php?videoid=3291274" frameborder="0" scrolling="no" allowfullscreen></iframe>

2 ответа 2

1

Убрать инлайн стили, и управлять CSS, при таком подходе придется с высотой повозиться на media запросах

.video iframe {
  width: 100%;
  max-width: 640px;
  height: 380px;
}

@media(max-width: 680px) {
  .video iframe {
    max-width: 100%;
    height: 300px;
  }
}

@media(max-width: 4800px) {
  .video iframe {
    height: 250px;
  }
}
<div class="video">
<iframe src="//video.sibnet.ru/shell.php?videoid=3291274" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div>

0

Адаптивное видео (css из html следует перенести куда следует, кусок кода взял из результата работы своего js скрипта):

<div style="padding-top: 5px; overflow: hidden; position: relative; max-width: 640px;">
  <div style="overflow: hidden; position: relative; height: 0px; padding-bottom: 56.25%;">
    <iframe src="https://video.sibnet.ru/shell.php?videoid=3291274/" scrolling="no" allowfullscreen="allowfullscreen" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" frameborder="0"></iframe>
  </div>
</div>

P.S. Тут отказывается работать, смотреть демо следует на https://jsfiddle.net/z9xyprht/ (там и ширину окна можно мышкой поменять).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.