Да, это не фокус, можно и больше разместить, Но, как это сделать выгодно. Небольшой пример.
Иногда приходится вставлять различные видео из 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="https://fonts.googleapis.com/css?family=Open+Sans" 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/fmeCJT5elkg?iv_load_policy=3&modestbranding=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-cY3GZQ4E?iv_load_policy=3&modestbranding=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/yxgnpQrBAeI?iv_load_policy=3&modestbranding=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/5Fl4qedNvcs?iv_load_policy=3&modestbranding=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/S2EsyHZalow?iv_load_policy=3&modestbranding=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/3e0FsU1N6OQ?iv_load_policy=3&modestbranding=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/3Q11d6I21PE?iv_load_policy=3&modestbranding=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>
Посмотреть как это работает можно на этой странице
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
0
|
|||
Последние откомментированные темы:
-
Word онлайн бесплатно
(1)
master284
,
04.05.2019
-
Ключевые слова и их связь с запросами
(1)
master284
,
04.05.2019
-
Как скачать Киностудию Windows (Windows Movie Maker) для Windows 10, Windows 8, Windows 7
(4)
Horov
,
23.07.2018
-
Как сделать кнопку своими руками
(1)
master284
,
29.12.2017
-
Какие существуют поисковые системы кроме Yandex и Google?
(1)
Словесник
,
21.12.2016
20240425093615