How to put image behind embedded youtube iframe

Question

i'd like to put an image behind my youtube iframe. The image will act as a visual frame around the youtube window. I've tried different methods, but either both elements where placed after each other, or the iframe was positioned relative to the window size of the browser. Both elements will sit in a table. I want the youtube window to sit about in the center of the background image and nothing should put both elements apart (like changing the window size of the browser etc.) In addition it would be pretty nice to have a custom preview picture for the video instead of the youtube window until it gets clicked (and possible put the custom picture back in place when the youtube video has been watched).

Solution

Set background-image behind your Youtube iframe and use JavaScript for custom preview picture.

TRY - DEMO

HTML:

<div id="background-video">
    <div onclick="play();" id="vidwrap"></div>
</div>

<!-- <iframe width="480" height="360" src="[YouTube Video URL]?autoplay=1" frameborder="0"> -->

<script type="text/javascript">function play(){document.getElementById('vidwrap').innerHTML = '<iframe width="480" height="360" src="http://www.youtube.com/embed/7-7knsP2n5w?autoplay=1" frameborder="0"></iframe>';}</script>

CSS:

#background-video {

    /* Your background image */

    background-image: url('http://placehold.it/580x460');

    background-repeat: no-repeat;
    padding: 50px;
}

#vidwrap {

    /* Your thumbnail image */

    background: url('http://www.edu.uwo.ca/img/click_to_play.png') no-repeat center;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden;
    background-repeat: no-repeat;
    width:480px;
    height:360px;
    cursor:pointer;
}