naeemqaswar
4/20/2017 - 8:38 PM

Set iframe wrapper image

Set iframe wrapper image

set_iframe_wrapper_img.html
content_copyfile_download
<!-- Ref: http://stackoverflow.com/questions/25582694/how-to-put-image-behind-embedded-youtube-iframe -->

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #background-video {
                /* Your background image */
                background-image: url('http://milesight-camera.be/wp-content/themes/twentysixteen/images/home-video-cover.png');
                background-repeat: no-repeat;
            }
            #vidwrap {
                /* Your thumbnail image */
                background: url('http://milesight-camera.be/wp-content/themes/twentysixteen/images/home-video-cover.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;
                height:410px;
                width:100%;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <div id="background-video">
            <div onclick="play_home_vid();" id="vidwrap"></div>
        </div>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            function play_home_vid(){
                var video_url = 'https://www.youtube.com/embed/dCqrpcnx4YE?rel=0&autoplay=1';
                var iframe_html = '<iframe id="home-video" width="560" height="315" src="'+video_url+'" frameborder="0" style="height:410px;width:100%;" allowfullscreen></iframe>';
                $('#vidwrap').html(iframe_html);
                $('#home-video').attr('src',video_url).data('lazy-src',video_url);
            }
        </script>
    </body>
</html>