Наложение картинки на iframe.
 

Здравствуйте! После прохождения курсов 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>

mo0n,
может документацию почитать про api на youtube?

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #player{
     display: none;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
        height: "200",
        width: "370",
        videoId: "xwmDe0OhhPs"
    })
}
$(function() {
    $(".show img").on({
        click: function() {
            $(this).hide();
            $("#player").show(600, function() {
                player.playVideo()
            })
        }
    })
});
  </script>
</head>

<body>
<div class="show"><div id="player"></div><img src="http://liubavyshka.ru/_ph/4/1/950678331.jpg" alt=""></div>
</body>
</html>

Большое спасибо. Дело не в апи ютуба, там я уже пошарил, что можно увидеть по ссылкам на этот сервис. Дело в js, который я практически совершенно не знаю. В любом случае еще раз большое спасибо.