Адаптивное видео
Существует довольно простое и изящное решение, существенно облегчающее этот процесс. Приведу простой пример и в довесок нему готовый набор правил CSS, для реализации абсолютной отзывчивости встраиваемого видео через iframe, object и embed с популярных видео-сервисов, таких как YouTube, VK, RuTube, Mail Video и других.
Для того чтобы видео автоматом подстраивалось под размеры родительского блока, достаточно в таблице стилей CSS, создать отдельный класс и определить все необходимые свойства для создания «резинового» контейнера, в котором и будет в последующем располагаться встроенный видеоролик. А так как видео-сервисы предлагают различные методы вставки видео на сайт, iframe, object и embed, следует учесть эту особенность, и задать стили для всех этих вариантов сразу. Тем самым в дальнейшем, мы избавим себя от лишних и ненужных телодвижений.
.Myvideo { position: relative; padding-bottom: 56.25%; height: 0; overflow:hidden; } .Myvideo iframe, .Myvideo object, .Myvideo embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Как видите всё очень просто, задаём относительное позиционирование для родительского блока и абсолютное относительно родителя, для встроенных элементов, определив им при этом, процентные значения ширины width: 100%; и высоты height: 100%;, чтобы в итоге видеоплеер смог растягиваться или сжиматься в соответствии размеров основного контейнера.
Со стилями разобрались, остаётся создать div контейнер с предопределенным классом, в нашем случае это class="Myvideo", затем вставить внутрь этого контейнера код нужного вам видеоролика, и всю эту конструкцию прописать там где вы планируете показовать видео.
<div class="Myvideo"> <iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen></iframe> </div>
Для некоторых видео параметры ширины и высоты iframe обязательны и если они не заданы, то встраиваются минимальные значения автоматически при загрузке страницы с фреймом. Так что добавляйте параметры width="auto" и height="auto" в фрейм.
Комментариев: 0 | |