I am creating a site that mostly contains video and am trying to get the same effect as seen on the trailers on www.apple.com/trailers where in clicking on the link to the video will display it at its specified resolution inside a slightly opaque black frame, thus removing distraction from the rest of the site. I am also at a loss for figuring out how to click upon the area outside of the video to stop viewing it.
At present I am using the tag with a small amount of javascript and custom css ui buttons, this would work fine but the native "fullscreen" function is ugly and i'm only looking to play the video in a window. My video also carries on playing when I come out of fullscreen, I would like that to stop.
Is there any way to simply code the functionality behind when clicking a placeholder, giving an opaque black frame in which the video at its specified resolution will sit and play, and then clicking outside of the frame will stop the video and take me back to where I found the video?