Вход • Регистрация

Как сделать ролики из youtube адаптивными

  •
  • 22 сентября 2017 г.
  • Уважаемые форумчане, подскажите как сделать ролики из youtube адаптивными. Пробовал так, но не получается.
    style.css прописывал-
    .video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }
    .video iframe,
    .video object,
    .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    потом вставлял
    <div class="video"><iframe src="..." width="700" height="450" frameborder="0"></iframe></div>


    Не помогает(
  •
  • 22 сентября 2017 г.
  • Я вот так делаю

    Код
    <div class="embed-responsive embed-responsive-16by9"><iframe width="100%" height="400" class="embed-responsive-item" src="https://www.youtube.com/embed/XXXXXXXX?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>


    CSS

    Код
    /*video youtube*/
    /*
    <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="..."></iframe>
    </div>
    <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="..."></iframe>
    </div>
    */
    .embed-responsive.embed-responsive-16by9 {
    padding-bottom: 56.25%;
    }

    .embed-responsive.embed-responsive-4by3 {
    padding-bottom: 75%;
    }

    .embed-responsive{
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
    margin:30px 0;
    }

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

  •
  • 22 сентября 2017 г.
  • Александр, спасибо большое. В мобильной версии все адаптировалось, только теперь на компе видео в ширину на всю страницу, попробую почитать и разобраться.
    •
    • 22 сентября 2017 г. , редакция: 23 сентября 2017 г.
    • max-width укажите и margin: 30px auto;
    •
    • 22 сентября 2017 г.
    • Через медиа-запросы ширину контейнера в котором youtube iframe можете разную делать, а сам iframe внутри него станет уже 100%
      •
      • 23 сентября 2017 г.
      • проще обернуть еще в один див и ему прописать стиль max-width и все без меди запросов
  •
  • 24 сентября 2017 г.
  • Спасибо большое господа разобрался!

Новости

  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
  • Новость. Сборка. Тарифы
  • 15 декабря 2023 г.
  • Подводим итоги 2023 года. Выпустили новую сборку DIAFAN.CMS 7.1.1, вводим новые тарифы на аренду сайта и коммерческую поддержку и автообновления с января 2024 г., строим планы на будущий год.
  • Сборка DIAFAN.CMS 7.0.1
  • 25 июля 2023 г.
  • Выпустили очередную сборку DIAFAN.CMS 7.0.1. Она уже доступна к установке.
Все новости

Блоги

  • Вышло обновление DIAFAN.CMS - cборка 7.1.1
  • 15.12.2023

  • В новой сборке DIAFAN.CMS 7.1.1 мы расширили функциональность баннеров, уделили внимание YML-фиду для Яндекс.Маркет, улучшили “Настройки шаблона”, оформили модуль лога действий и разработали “Заметки” для пользователей административной части сайта. Также проработали замечания и предложения наших пользователей, исправили несколько ошибок.

Читать блоги

Форум

Перейти на форум