» »

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

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

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

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

1. Способ

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

Код
<div class="myvideo">...</div>

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

Код
<div class="myvideo">  
<iframe width="560" height="315" src="//www.youtube.com/embed/kPYBn8VcdXk" frameborder="0" allowfullscreen></iframe>  
</div>

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

Код
.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, что под стилями.

Код
<div class="video-responsive">
  <iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen></iframe>
</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.10.2017 Просмотров: 328 Комментарий: (0)

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

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

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