ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивное видео с изменением размера CSS

Адаптивное видео с изменением размера CSS

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

Здесь реализуем вставки iframe, object и embed, на которые редактируем и подстраиваем. Что изначально все нужно проставить или прописать все варианты. И после этого все сохраняем и забываем про лишнее действие, что делали ранее. Этот отличный инструмент подойдет под кино сайты, что меняют шаблоны, а как знаем у каждого своя фиксированная ширина, что все можно на стилях исправить и сделать вывод корректным.

1. Способ

Для того чтобы сделать видео из YouTube адаптивным, нужно сделать следующее
Вставить тэг iframe с видео.

Код

то есть сделать так:

Код

В таблицу стилей в самый низ прописать такой код:

Код

.myvideo {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
border:1px solid #ccc;
}
.myvideo iframe,.myvideo object,.myvideo embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

2. Способ

Плеер располагается в div, что под стилями.

Код

Выставляем по умолчанию, что сразу в дальнейшем все идет автоматически и веб мастер избавляется от лишней настройки.

CSS

Код

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Также можете перейти на форум, где изначально рассматривался этот материал, что также можете для себя новое подчеркнуть.

22 Октября 2017 Просмотров: 1565 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0