Рубрика: HTML

Адаптивное видео с iframe

PHP
1
2
3
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VBOSOREJE68" frameborder="0" allowfullscreen>
</div>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.video {
  position:relative;
  padding-bottom:56.25%;
  /*пропорции видео 16:9 */
  padding-top:25px;
  height:0;
  width: 100%;
  float: left;
  margin-top: 20px;
}
.video iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

 

Заготовки

Модальные окна: https://codepen.io/losbeekos/pen/cmqaL https://codepen.io/simgooder/pen/BoJYoQ Модальные окна с видео: https://codepen.io/mattamyot/pen/dMGwyK https://codepen.io/josephkes/pen/kkrRBk Select: https://codepen.io/THEORLAN2/pen/Kaewmw?depth=everything&order=popularity&page=2&q=select&show_forks=false https://codepen.io/udyux/pen/KzJQea?depth=everything&order=popularity&page=3&q=select&show_forks=false Заказ билета — выбор места: https://codepen.io/pieceoftoast/pen/yypKRM Блоки: https://codepen.io/zadvorsky/pen/OxKMbj Успешная отправка сообщений: https://codepen.io/colinhorn/pen/KXjYXr …