• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать адаптивное видео для сайта на CSS (Адаптивный веб-дизайн для видео роликов ютуба на CSS3)
Создать адаптивное видео для сайта на CSS
Kosten
Дата: Воскресенье, 2019-08-25, 21:58 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Адаптивный дизайн произвел революцию, где многих стимулировал переход от нативных приложений к веб-приложениям, легко настраиваемым для мобильной среды, чтоб корректно отображалось на любом размере экрана. Это касается и аидео плеера, за основу возьмем плеер от ютуба и сделаем его отзывчивым, чтоб корректно отображался на всех мониторах.

Если ранее мы медиа-запросы и не пиксельные измерения, чтобы упростить адаптивный дизайн, где на самом деле, img {max-width: 100%} это один из моих любимых фрагментов CSS. Элементы IFRAME создают совершенно другую проблему, поскольку они не ограничены размерами.



Чтобы сделать IFRAME отзывчивым, вам нужно обернуть его в div.

HTML

Код
<div class="adaptivny-dizayn-pleyera">
  <iframe width="1284" height="510" src="https://www.youtube.com/embed/FNLh9evGIA4"></iframe>
</div>

CSS

Код
.adaptivny-dizayn-pleyera {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.adaptivny-dizayn-pleyera iframe {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Это соотношение соответствует отношению высоты YouTube к ширине, но вы можете использовать любое соотношение, соответствующее соотношению использования IFRAME.

Демонстрация
Прикрепления: 9514314.jpg(30.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать адаптивное видео для сайта на CSS (Адаптивный веб-дизайн для видео роликов ютуба на CSS3)
  • Страница 1 из 1
  • 1
Поиск: