<div class="popup" onclick="myFunctionlowery()">
 <img src="http://wellscreate.com/wp-
  content/uploads/2017/11/7K0C0970.00_05_07_29.Still003.jpg" alt="" style="" />
 <div class="coverlay">
  <span class="popuptext" id="lowery">
   <div style="position:relative; top:10vh; width:100%; max-width:1000px;
     margin:0 auto;">
    <iframe style="width:100%; max-width:1000px; height:50vw;
     max-height:700px;" src="https://www.youtube.com/embed/O46xDFbhHtg?
     autoplay=true" frameborder="0" allowfullscreen>
    </iframe>
   </div>
  </span>
 </div>
</div>

.popup {
 position: relative;
 display: inline-block;
 cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
 display:none;
 width: 100vw;
 height:100vh;
 background: rgba(0,0,0,.8);
 border-radius: 6px;
 position: fixed;
 z-index:1;
 top:0;
 left:0;
 right:0;
 bottom:0;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
 display:block;
 -webkit-animation: fadeIn 1s;
 animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
 from {opacity: 0;}
 to {opacity: 1;}
}

@keyframes fadeIn {
 from {opacity: 0;}
 to {opacity:1 ;}
}

.coverlay{position:absolute;
 bottom: 10px;
 left: 0;
 right: 0;
 height: 100%;
 width: 100%;
 background: rgba(250,250,250,.0);
 border-radius: 8px 8px 0 0;
 transition: background .5s;
 background-image:url("http://wellscreate.com/wp-
 content/uploads/2017/11/Untitled-1-01.png");
 background-position: center bottom;
 background-repeat:no-repeat;
 background-size:15%;
}

.coverlay:hover{
 background: rgba(250,250,250,.5);
 background-image:url("http://wellscreate.com/wp-
 content/uploads/2017/11/Untitled-1-01.png");
 background-position: center;
 background-repeat:no-repeat;
 background-size:16%;
}

function myFunctionlowery() {
    var popup = document.getElementById("lowery");
    popup.classList.toggle("show");
}