• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Делаем видео фон для блока при помощи CSS (Как можно сделать видео фоном блока с помощью CSS)
Делаем видео фон для блока при помощи CSS
Kosten
Воскресенье, 03 Февраля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
На многих современных или тематических сайтах идет оригинальный стиль дизайна, где присутствуют уникальные решение, как наш видео фон, который безусловно будет отличатся от других. Так как здесь будем устанавливать видеофон в блок div на html и css. Уже многие интернет ресурсы воспользовались таким решением, но нужно понимать, какой подходи фону.

А здесь берем ссылку на видео ролик, где первый или первый кадр станет отличным решение для фона. Где можно посмотреть аналогичный вариант на видео фон, который при открытие станет запускать видео ролик.Это касается тематический ресурсов, которые предлагают товар или услуги, но не исключаю, что можно увидеть на игровом сайте.

Также будет на темно прозрачном фоне место под описание, где можно разместить статью или мануал, вообщем по теме, что ниже идет место под кнопку на период, все сделано так гармонично, что идет одним стилем.

Какие есть преимущества и недостатки видео в фоне:

Плюсы: это безусловно современное решение, также идет динамическое решение сценария, красиво сделанное оформление:
Минусы: как всегда на видео должно время пройти, чтоб оно могло пойти, да это доли секунды, но всеже влияют на загрузки страницы:

Так выглядит при установки:



Также все проверено на работоспособность, где ниже представлена demo страница.



Приступаем к установке:

HTML

Код
<div class="decompan_usevoosa_nkangs">
    <div class="kangsan-kgadoming">
      <iframe src="https://www.youtube.com/embed/qPvPL2e0ZqU" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

<div id="gadoming-kandevices">
<div class="sebespons-nuvevus">
      <h1>ZorNet - портал для вебмастера</h1>
      <p>Краткое описание.</p>
          <p>Описание по тематике</p>
          <p>Второе описание.</p>
     <a href="#">Ключевое слово на переход</a>
  </div>
</div>

CSS


Код
* { box-sizing: border-box; }
.decompan_usevoosa_nkangs {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.kangsan-kgadoming,
.decompan_usevoosa_nkangs iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#gadoming-kandevices {
    top: 0;
    color: #fff;
}
.sebespons-nuvevus {
    position: absolute;
    top: 0;
    right: 0;
    width: 34%;
    background: rgba(16, 16, 16, 0.54);
    color: #efecec;
    text-shadow: 0 1px 0 #333131;
    padding: 1rem;
    font-family: Avenir, Helvetica, sans-serif;
}
.sebespons-nuvevus h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0;
    line-height: 1.2;
}
.sebespons-nuvevus a {
    display: block;
    color: #f9f6f6;
    text-decoration: none;
    background: rgba(23, 22, 22, 0.57);
    transition: .6s background;
    border-bottom: none;
    margin: 1rem auto;
    text-align: center;
}
@media (min-aspect-ratio: 16/9) {
  .kangsan-kgadoming { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .kangsan-kgadoming { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.sebespons-nuvevus { width: 50%; padding: .5rem; }
.sebespons-nuvevus h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.sebespons-nuvevus .acronym { display: none; }
}


Здесь нужно заметить, что на некоторых мобильных гаджет видео по умолчанию не станет проигрывается.

Демонстрация
Прикрепления: 0242765.jpg (87.7 Kb) · 6641914.jpg (65.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Делаем видео фон для блока при помощи CSS (Как можно сделать видео фоном блока с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: