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

Как сделать ролики из 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.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

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