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

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

by Andrey Dobrovoi

HTML

<div class="wrapper">
  <div class="video-wrapper">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/eUyr9MJnj4w?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <div class="video-description">
    <h2>
     Dobrovoi
    </h2>
      
    </div>
  </div>
  <br>
  <p style="text-align: center;">сделано с любовью: <a href="http://twitter.com/dobrovoi" target="_blank">@dobrovoi</a></p>
  <p style="text-align: center;"><a href="http://dbmast.ru/modalnoe-okno-na-html5-css3-i-skrytyh-chekboksah" target="_blank">&laquo;&laquo; Изучить детали</a></p>
</div>

CSS

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

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

.wrapper {
  margin: 2em auto;
}

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

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

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

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

a:hover {
  color: #17aa2e;
}

.video-wrapper {
  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);
}

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

.video-description {
  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;
}

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

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

JavaScript

/* ========================================================================= */
/*	shurawi --- dbmast.ru ---
/* ========================================================================= */