Youtube Video Image Overlay

Click the image, Youtube video plays.

HTML

<script src="http://www.youtube.com/apiplayer?enablejsapi=1&amp;version=3"></script>
<iframe id="video" width="440" height="300" src="//www.youtube.com/embed/dQw4w9WgXcQ?version=3&enablejsapi=1 " frameborder="0" allowfullscreen></iframe>
<img id="pic" src="http://placekitten.com/440/300" />
<h1>Click the cat...</h1>

CSS

#video {
    opacity: 0;
    visibility:hidden;
    position: absolute;
    top: 40px;
    left: 40px;
    
}

#pic {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 999999;
}

h1 {
    position: absolute;
    top: 350px;
    left: 100px;
    
    
}

JavaScript

var player = document.getElementById('video');
$('#pic').click(function(){
    $('h1').text(window.atob('bG9sIEkgVHJvbCBV'));
    $(this).hide();
    $('#video').css('visibility','visible').animate({
        opacity: 1
    }, 2000);
player.playVideo();
});