4 Сентябрь 2020

Вставляем видео с ютуба на сайт адаптивно

posted in Вёрстка |

На авторство не претендую, просто оставлю себе готовое решение, чтоб не искать потом по просторам сети

Код фрейма оборачиваем блоком с классом video, размеры фрейма можно не указывать

.video {
  position: relative;
  padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  height: 0;
  overflow: hidden;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  outline-width: 0;
}

.video {

position: relative;

padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */

height: 0;

overflow: hidden;

}

.video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-width: 0;

outline-width: 0;

}

Запись опубликована on 04.09.2020 at 15:09 and is filed under Вёрстка. Вы можете читать комментарии, используя RSS-ленту. Вы можете оставить комментарий, или отправить трекбек с Вашего сайта.

Пн	Вт	Ср	Чт	Пт	Сб	Вс
« Мар
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Вставляем видео с ютуба на сайт адаптивно

Оставить комментарий