Наложение изображения на видео с youtube и открытие по клику

Хотите добавить поверх видеоролика с youtube свою картинку с какой-то дополнительной информацией? Это легко сделать с помощью небольшого кода! Рабочий пример над этим текстом (кликните на изображение).
Стили - css:

< style >
.video-wrapper{
  position:relative;
  display:inline-block;
}
.video-overlay{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-image:url("https://i.ibb.co/WBXkbyf/izobrazhenie.jpg"); /* заливаем блок статичной картинкой */
  background-size:cover; /* масштабируем изображение по размеру блока */
}
< /style >

Вывод изображения/видео - html:

< div class="video-wrapper" >
  < div class="video-overlay" >< /div >
  < iframe width="560" height="315" src="https://www.youtube.com/embed/zifIRE_f79o?autoplay=1" frameborder="0" allowfullscreen >< /iframe >
< /div >

Небольшой код на JavaScript:

< script type="text/javascript" >
document.querySelector(".video-overlay").onclick = function(){
    this.style.display = "none";
}
< /script >

! После копирования и вставки кода, не забудьте убрать лишние пробелы в скобках style, script и div.