html 设置iframe包装器图像

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 设置iframe包装器图像相关的知识，希望对你有一定的参考价值。

<!-- 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>

以上是关于html 设置iframe包装器图像的主要内容，如果未能解决你的问题，请参考以下文章

scss iFrame嵌入包装器（不是soundcloud）

在包装器中按图像自动隐藏自动高度和宽度

从互联网加载图像后，Viewpager 不包装内容

Rust：允许多个线程修改图像（向量的包装器）？

scss 基于包装器大小缩放和居中图像