Show

without JS

I have a very, very simple webpage, It consists of a large background image and a button in the centre of this image (the button is placed in a div to position it), I want this button to be clickable, and when clicked, replaced with ANOTHER div which will show a film trailer.

Every solution I come across implements JS and is to show/hide the div and does not replace the show/hide button.

I simply want to SHOW the div, it does not need to be hidden after (as the button will hopefully be replaced anyway).

Almost identical to this example on the Duke Nukem website : http://www.dukenukemforever.com/full/us/

When you click play trailer, it appears central. The only difference between this and what I want to do is I want my button to be central also, and show the trailer over the top of the button (with no ability to hide the trailer after it has begun)

If any one is wondering why I don't just put the trailer on the page and not bother with this is the reason for having it 'show' instead of just embedding the video in a div in the center of the page is that the webpage has a large background which I want to be visible first for impact, then show the trailer.

if this is possible in JS and someone can show me an example, I would be open to that too!