Поддержка Проблемы и решения Не работают изменения css

  • Привет. Подскажите пожалуйста, в чем может быть проблема. Мне нужно сделать видео с ютуба на моем сайте адаптивными под разные разрешения.
    В интернете везде одно решение:
    1) Вставить в style.css код класса:

    .thumb-wrap {
    position: relative;
    padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .thumb-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    2) вставить на страницу код видео, обернутый в этот класс:
    <div class=»thumb-wrap»>
    <iframe src=»https://www.youtube.com/embed/PYyNqjs5Y0g&#187; width=»540″ height=»350″ frameborder=»0″ allowfullscreen></iframe>
    </div>

    Я все делаю именно так, но у меня ничего не меняется.
    В style.css код вставляю в конец, вот так:

    }
    .site-footer,
    .widecolumn {
    padding: 0;
    }.thumb-wrap {
    position: relative;
    padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .thumb-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    }

    Ну и соответственно на страницу вставляю код видео.

    <div class=»thumb-wrap»>
    <iframe src=»https://www.youtube.com/embed/PYyNqjs5Y0g&#187; width=»540″ height=»350″ frameborder=»0″ allowfullscreen></iframe>
    </div>

    Больше ничего не делаю. Но у меня не работает. Подскажите, в чем может быть причина.

Просмотр 1 ответа (всего 1)
  • возможно width у самого видео надо поставить 100%
    А то блок где у вас видео адаптивный, а само видео имеет фиксированную ширину.

Просмотр 1 ответа (всего 1)
  • Тема «Не работают изменения css» закрыта для новых ответов.