» »

Наложение изображения на видео в CSS

Наложение изображения на видео в CSS
В этом материале узнаете, как можно несложно наложить картинку или изображение по вверх видео плеера, где по клику переходим на заданный адрес. Сама идея не нова, но ранее можно было сделать при помощи JavaScript, но сейчас мы все создаем с помощью чистого CSS. Где ставя видео плеер на сайт, то как веб мастер вы можете подключить к нему логотип, что по умолчанию виден на первом кадре видео плеера.

Теперь вам известно, как сделать красивое или оригинальное наложение заголовка изображения при помощи CSS. Так как будет глупо выставлять большую картинку на всю ширину, ведь как уже сказано, что снимок, который ставим, то изначально мы все делаем под ссылку на переход. И в таком случай можно поставить логотип или снимок в небольшом размере, что при открытии страницы будет изначально заметна.

Так после установки получится, здесь как можно заметить поставлен логотип:

Как наложить изображение на видео при помощи CSS3

HTML

Код
<div class="supeg_abuloka">
  <div class="kaona_sayta_sumos">
<iframe width="579" height="348" src="https://www.youtube.com/embed/3YD_pwvlqeE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <div class="ustanovka_video_kaches">
  <a href="http://zornet.ru/" target="_blank"><img width="285" height="53" src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/zornet.png" alt="ZorNet.Ru — сайт для вебмастера" scale="0"></a>
  </div>
  </div>
</div>

CSS

Код
*,
:after,
:before {
  box-sizing: inherit;
}

body {
  background: rgb(72, 75, 84);
  font-family: 'Roboto', sans-serif;
  color: #b6b6b6;
  margin: 0;
}

.supeg_abuloka {
  margin: 2em auto;
}

@media (min-width: 1200px) {
  .supeg_abuloka {
  width: 1170px;
  }
}

@media (min-width: 992px) {
  .supeg_abuloka {
  width: 970px;
  }
}

@media (min-width: 768px) {
  .supeg_abuloka {
  width: 750px;
  }
}

a {
  color: #6c7d00;
  text-decoration: none;
}

a:hover {
  color: #17aa2e;
}

.kaona_sayta_sumos {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
}

.kaona_sayta_sumos iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.ustanovka_video_kaches {
  background: transparent;
  position: absolute;
  top: 10%;
  left: 2%;
  width: 36%;
  max-width: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.ustanovka_video_kaches img {
  width: 100%;
  /* ширина картинки */
  height: auto;
  /* высота картинки */
}

.ustanovka_video_kaches h1 {
  color: red;
  font-family: "Nobile", sans-serif;
  font-size: 2em;
  margin: 0;
  padding: 0;
  text-align: center;
}

Все это делаем в правом верхнем углу, здесь нужно так рассчитать, чтоб оригинальные функций, что идут с плеером были доступны. Здесь закреплены стили CSS, где уже самостоятельно найдете место под установку.

Демонстрация
2019-12-08 Загрузок: 2 Просмотров: 309 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar