Как разместить на одной странице 20-30-40 видео из YouTube компактно

master284 · 15.07.2019

Как разместить на одной странице 20-30-40 видео из YouTube компактно

Да, это не фокус, можно и больше разместить, Но, как это сделать выгодно. Небольшой пример.
Иногда приходится вставлять различные видео из YouTube при вёрстке и всегда в режиме адаптирования. Когда это одно видео, это всё просто, а если их несколько, или много штук 20-30.
И вот возникла идея создать блок виде плееров штук 20 чтобы посетитель видел одновременно все видео на десктопном мониторе, на телефоне в компактном виде и делал выбор.
Используя display:inline-block; для иконок плееров выстраиваю их в ряд по этажам. Сами же видео плееры имеют свои размеры заложенные в каждом браузере. Они открываются на весь экран и обратно. Обычная видео иконка 300 рх на 150 рх.
Небольшая доработка кода плеера скрывает возможность перехода на YouTube, пока не досмотреть видео до конца.
В итоге, ваш посетитель все видео просматривает на вашем сайте полностью находясь дольше, чем усиливает поведенческий фактор.
Привожу полностью разметку HTML со стилями.

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ВИДЕО БЛОК</title>
<link href="

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

" rel="stylesheet">
<style>
.rec{
border:2px solid red;
max-width:1600px;
text-align:center;
margin:0 auto;
}
.rec_item{
display:inline-block;
margin-top: 2em;
background: blue;
color:#fff;
}
.rec_item p{
padding-bottom:0.7em;
}
</style>
</head>
<body>
<section>
<h3 style="text-align:center;">VIDEO НОВОСТИ</h3>
<div class="rec">
<div class="rec_item"><iframe src="https://www.youtube.com/embed/fmeCJ...g=1&rel=0&autohide=1&playsinline=1&autoplay=0" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
<p>Почему желудок д. б. пустой?</p></div>
<div class="rec_item"><iframe src="https://www.youtube.com/embed/TV-cY...g=1&rel=0&autohide=1&playsinline=1&autoplay=0" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
<p>Система Серафима Чичагова Часть 2</p></div>
<div class="rec_item"><iframe src="https://www.youtube.com/embed/yxgnp...g=1&rel=0&autohide=1&playsinline=1&autoplay=0" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
<p>Система Серафима Чичагова Часть 3</p></div>
<div class="rec_item"><iframe src="https://www.youtube.com/embed/5Fl4q...g=1&rel=0&autohide=1&playsinline=1&autoplay=0" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
<p>Женщине сохранить здоровье</p></div>
<div class="rec_item"><iframe src="https://www.youtube.com/embed/S2Esy...g=1&rel=0&autohide=1&playsinline=1&autoplay=0" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
<p>Восстановление позвоночника</p></div>
<div class="rec_item"><iframe src="https://www.youtube.com/embed/3e0Fs...g=1&rel=0&autohide=1&playsinline=1&autoplay=0" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
<p>ТВ канал Ньюзван</p></div>
<div class="rec_item"><iframe src="https://www.youtube.com/embed/3Q11d...g=1&rel=0&autohide=1&playsinline=1&autoplay=0" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
<p>ТВ канал 112 Украина</p></div>
</div>
</section>
</body>
</html>
Посмотреть как это сделано в живую можно

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Как разместить на одной странице 20-30-40 видео из YouTube компактно

master284