Может быть так? Для одного iframe видео. Если несколько, код придется немного изменить.
После отсчета открывается видео, либо раньше по клику на видео.
Демо:
https://jsfiddle.net/17sxjhyu/4/
Код:
После отсчета открывается видео, либо раньше по клику на видео.
Демо:
https://jsfiddle.net/17sxjhyu/4/
| Код |
|---|
Добавить в стили то что в <style></style> |
| Код |
|---|
Вставить в низ страницы то что в <script></script> |
| Код |
|---|
Поменять кнопку на свою (<img src="http://icons.iconarchive.com/icons/dryicons/aesthetica-2/48/play-icon.png">) |
Код:
| Код |
|---|
<!DOCTYPE html>
<html>
<head>
<style>
.stub {
background-color:#f9f9f9;
color:#aaa;
position:relative;
border:5px double #ccc;
cursor:pointer;
display:flex;
justify-content:
center;align-content:
space-between;align-items:
center;
flex-direction: column;
}
.stub img {}
.stub .button {
width:160px;
padding:3px;
border:1px solid #ccc;
border-radius: 5px;
text-align:center;
}
.count {
position:absolute;
bottom:0;
right:0;
width:100px;
padding:3px;
background-color:#999;
color:#fff;
border-top-left-radius: 8px;
text-align:center;
}
</style>
</head>
<body>
<h3>Заглушка видео для SEO BOSS</h3>
<iframe width="469" height="224" src="https://www.youtube.com/embed/Vd5GTTybtnI"></iframe>
<script>
var iframe = document.querySelector('iframe');
iframe.style.display = 'none';
var div = document.createElement('div');
div.className = 'stub';
div.style.width = iframe.width+'px';
div.style.height = iframe.height+'px';
// Тут писать html код в одну строку. <div class="countdown"></div> - не трогать, нужен для таймера
div.innerHTML = '<img src="http://icons.iconarchive.com/icons/dryicons/aesthetica-2/48/play-icon.png"><p>Видео скрыто для экономии трафика</p><div class="button">Показать содержимое</div><div class="countdown"></div>';
document.body.insertBefore(div, iframe.div);
// Таймер
var counter = 15; //Сколько секунд
var active = setInterval(countdown, 1000);
function countdown(){
if (counter >0){
counter-=1;
document.querySelector('.countdown').innerHTML='<div class="count">'+counter+' секунд</div>';
}
else{
window.clearInterval(active);
document.body.removeChild(document.querySelector('.stub'));
document.querySelector('iframe').style.display = 'block';
}
}
// На клик показывается
div.onclick = function(){
document.body.removeChild(document.querySelector('.stub'));
document.querySelector('iframe').style.display = 'block';
window.clearInterval(active);
}
</script>
</body>
</html>
|
