Здравствуйте! После прохождения курсов js, я к сожалению так ничего и не понял
Мне нужно наложить картинку на iframe. Постараюсь описать подробнее:
1. Есть iframe с видео из ютуба.
2. Есть картинка.
При клике на картинку, она должна пропадать, а iframe в этом случае должен запускать(в том же месте, за место картинки) и автоматически проигрываться. Т.е. между картинкой и воспроизведением видео всего должен быть один клик.
Где-то на этом форуме нашел похожий код, немного обработал его, но получается, либо мне нужно жать 1 раз на картинку, что бы она пропала, а потом еще раз, что бы видео начало воспроизводиться, либо указывать автоплэй в ютубе, но тогда он сразу начинает играть, как бы накрытый картинкой.
Вот исходник.
<script type="text/javascript">
// Набор функций
var base = {
// Поиск элементов по классу
findClass: function(str, node) {
if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
else {
var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
for(i = 0; i < length; i++) {
key = true;
for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
if(key) array.push(list[i]);
}
return array;
}
},
// Добавление обработчиков событий
bind: function(node, type, listener) {
if(node.addEventListener) node.addEventListener(type, listener, false);
//@cc_on node.attachEvent('on' + type, function() { listener.call(node); });
},
// Реализация DOMContentLoaded
init: [],
ready: function() {
if(!arguments.callee.done) {
arguments.callee.done = true;
if(this.timer) clearInterval(this.timer);
var i, length = this.init.length;
for(i = 0; i < length; i++) this.init[i]();
this.init = [];
}
},
check: function() {
var _this = this, listener = function() {
_this.ready();
};
if(document.addEventListener) document.addEventListener('DOMContentLoaded', listener, false);
if(/KHTML|WebKit/i.test(navigator.userAgent)) this.timer = setInterval(function() {
if(/loaded|complete/.test(document.readyState)) base.ready();
}, 10);
/*@cc_on document.write(unescape('%3CSCRIPT onreadystatechange="if(this.readyState==\'complete\') base.ready()" defer=defer src=\/\/:%3E%3C/SCRIPT%3E')); @*/
this.bind(window, 'load', listener);
}
};
// Функции для работы с панельками
var toggler = {
process: function() {
var i, list = base.findClass('toggler'), length = list.length;
for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle);
list = base.findClass('content');
length = list.length;
for(i = 0; i < length; i++) list[i].style.display = 'none';
},
toggle: function() {
var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event;
if(content.style.display == 'block') {
content.style.display = 'none';
this.innerHTML = 'Показать';
}
else {
content.style.display = 'block';
this.innerHTML = '';
}
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
};
// Ищем блоки с классом «toggle» по событию DOMContentLoaded
base.init.push(function() {
toggler.process();
});
// Запускаем проверку готовности DOM
base.check();
</script>
<div style="position:relative;top:-6px;">
<div style="border: 3px solid #bb454f">
<div style="border: 3px solid white">
<div class="toggle" style="width:288px; height:188px">
<div class="content"><iframe src="https://www.youtube.com/embed/Ot3EL8hbTD0?cc_load_policy=1&rel=0&showinfo=0&"
height="188" width="288" allowfullscreen="" frameborder="0"></iframe></div>
<a class="toggler" href="#"><img src= "/wp-content/uploads/video/1.png"></a>
</div></div></div>
</br>
<div style="border: 3px solid #bb454f">
<div style="border: 3px solid white">
<div class="toggle" style="width:288px; height:188px">
<div class="content"><iframe src="https://www.youtube.com/embed/SGdEQYC0tAY?cc_load_policy=1&rel=0&showinfo=0"
height="188" width="288" allowfullscreen="" frameborder="0"></iframe></div>
<a class="toggler" href="#"><img src= "/wp-content/uploads/video/2.png"></a>
</div></div></div></div>
