Make div appear and change the whole html to be darker

Question

I have a div and after I click a button, I would like the div to appear (which I can do), but I would like the whole background to become darker too (this is inline with overlay

Answer 1

HTML--

click me

YOUR HTML GOES HERE
 

CSS--

html, body {
    width  : 100%;
    height : 100%;
}
#overlay-back {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : #000;
    opacity    : 0.6;
    filter     : alpha(opacity=60);
    z-index    : 5;
    display    : none;
}

#overlay {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 10;
    display  : none;
} 

JS--

$('#some-button').on('click', function () {
    $('#overlay, #overlay-back').fadeIn(500);
});

Then just add your youtube video embed code to the overlay div and style it appropriately to put it where you want on the page.

Here is a demo: http://jsfiddle.net/EtHbf/1/