Rectangle 27 0

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

<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>
#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;
}

html - How to put image behind embedded youtube iframe - Stack Overflo...

html iframe youtube position
Rectangle 27 0

Have you already tried to have your youtube-iframe in a container and set the image as background-image of this container? Like this:

<div class="youtube">
 <-- youtube iframe or target here -->
</div>

and css:

div.youtube {
 background: url('url-of-your-image.png')
 padding: 50px; // adjust as needed
}

html - How to put image behind embedded youtube iframe - Stack Overflo...

html iframe youtube position