How to leave an entire page clickable linked to a button?

Question

how can I leave an entire page clickable linked to a button? Example: http://jsfiddle.net/u06oowLn/ when the person clicks on any area of the site click on the play button or on the youtube video that will ta on the page, as if it were an ad invisible throughout the page, leaving clickable

Answer 1

sfiddle

Just associate the click event to document instead of the id of the button #btnPlay

Library

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>

<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

Script: you must set the video in videoId: 'YeiYa70RxRc'

$(window).load(function(){
var player = new YT.Player('player', {
    width: 540,
    height: 320,
    videoId: 'YeiYa70RxRc'
});

$(document).on("click", function() {
    player.playVideo();
});
});

Html

<div id="player"></div>

Answer 2

You can link a click event to the window or Document, with javascript, so when anywhere on the screen or document is clicked this event will be executed

$(window).click(function() {
    console.log("Botão clicado")
});

or

$(document).click(function() {
console.log("Botão clicado")
});