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.

Image Overlay Title

Hover over the image to see the effect.

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

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>
 
#3
Здравствуйте,
Мы занимаемся изготовлением модифицированных прошивок на заказ
,это тюнинг прошивки Stage1,Stage2,удаление ЕГР,ДПФ,перевод на
евро2 и прочих систем.
ролик на ютуб про нас

Image Overlay Title

Hover over the image to see the effect.

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

для Вас мы работаем ЕЖЕДНЕВНО!

заказ калибровки прошивки производится через email
max.autoteams@ya.ru
в заказе обязательно указываем:
Тех. задание!
1. Марка авто:
2. Модель:
3. Объём мотора:
4. Коробка (Мт/Ат):
5. Какой ЭБУ:
6. Чем читали:
7. Задание (тюн/e0/е2/EGR/DPF/Adblue/evap/SAP/TVA/TVS/либо другое):
8. прикрепляем файл стоковой,оригинальной прошивки


Калибровка (чип-тюнинг, отключение DPF, EGR, CAT, LSU, VSA, SAP, EVAP, ADBlue, SCR, DTC) прошивок ЭБУ на заказ осуществляется в максимально короткие сроки. Все заказы направляйте на почту max.autoteams@ya.ru"
 
Top