prevent users from clicking on youtube video embedd. Overlay blank image ontop of video.

friendlymoderator

Administrator
Staff member
#1
Code:
<style>
* {box-sizing: border-box;}

.container {
  position: relative;
  width: 800px;
  max-width: 500px;
}

.image {
  display: block;
  width:800px;
  height: 500px;
}

.overlay {
  position: absolute;
  bottom: 40px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 800px;
    height: 460px;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 5;
}
</style>
</head>
<body>

<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <iframe  class="image"  src="https://www.youtube.com/embed/u9O5jUcfQus?autoplay=1&rel=0&modestbranding=1&showinfo=0"
               
                frameborder="0" allow="autoplay; encrypted-media" donotallowfullscreen  frameborder="0"></iframe>
  <div class="overlay">Shareallweb.com</div>
</div>
the result is below. Use it because no one else knows about the doe.

 

friendlymoderator

Administrator
Staff member
#2
sorry updated code. Was rushing with code and realized that it wouldn't autofit screen in mobile because it needs width: 100%; and forgot to take
max-width: 500px; thinking it said max-height. Some problems that arise is that it doesn't auto play in mobile but you can decrease size image overlay. I also took out image overlay out of the container div. I was rushing with this code and when you rush its terrible.



<style>


.container {
position: relative;
width: 100%;

}

.image {
display: block;
width: 100%;
height: 500px;
}

.overlay {
position: absolute;
bottom: 40px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
height: 460px;

opacity:0;
color: red;
font-size: 20px;
padding: 0px;
text-align: center;
}

.container:hover .overlay {
opacity: 5;
}
</style>
</head>
<body>

<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>



<div class="container">
<iframe class="image" src="https://www.youtube.com/embed/N_AgOARirOc?autoplay=1&rel=0&modestbranding=1&showinfo=0"

frameborder="0" allow="autoplay; encrypted-media" donotallowfullscreen frameborder="0"></iframe>

</div>

<div class="overlay">Shareallweb.com Click on sidebar below to play stop and skip. </div>
 
Top