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.

Shareallweb.com Click on sidebar below to play stop and skip.

tap over Click on sidebar above here to play stop and skip.

tap over Click right above here to play stop and skip to see sidebar.

Smiley face
 

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