<!-- iframe container div -->
<div style="position: relative; width: 100%; height: 50vh; margin: auto" >
<!-- layer that hides the iframe (and, consequently: suggested videos) when the video is not playing; the layer contains video-info and a play button; of course, all instances of my_player_layer must be replaced with a new ID when another video is added (for instance: my_player_layer2); similar remark for my_player -->
<div id="
my_player_layer" style="position: absolute; left:0; top: 0; right:0; bottom:0; background: black; color: white; text-align: center; font-family: arial; font-size: 18px; padding: 10px; line-height: 25px"><b>Rachmaninov</b><br>Rhapsody on a Paganini Theme<br>Variation XVIII<div style="background:red; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: arial; font-size: 40px; cursor: pointer; padding: 5px; line-height: 35px; " onclick="
my_player.playVideo()">
►</div></div>
<!-- the iframe; the timeout in the onload is required for Chrome; of course, all instances of ifr must be replaced with a new ID when another video is added (for instance: ifr2) -->
<iframe frameborder="0" id="
ifr" style="position: absolute; width: 100%; height: 100%" src="http://www.youtube-nocookie.com/embed/bKZbvluHcNo?html5=1&enablejsapi=1" onload="
my_player=new YT.Player(document.getElementById('
ifr') ,{events: {'onStateChange':function(){if(
my_player.getPlayerState()===1){setTimeout('document.getElementById(\'
my_player_layer\').style.zIndex = -1', 200)} else {setTimeout('document.getElementById(\'
my_player_layer\').style.zIndex = 1', 200)}; }}})">
</iframe>
</div>