Question

在尝试了几个选项之后，我设法在主页中嵌入了一个视频（就像在airbnb中一样）。现在我无法弥补出现在视频和浏览器边缘的小差距。检查safari和chrome两者的间隙是宽度。

            <!DOCTYPE div PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
                <meta charset="UTF-8">
                <title>World wonders</title>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                <style type="text/css">
                h3{
                    color: #3cbc8d;
                    z-index: 1;
                    text-align: center;
                    margin-right: auto;
                    margin-left: auto;
                    margin-top: 10%;
                    border: 3px solid #ffffff;
                    padding: 10px;
                    border-radius: 15px;
                    width: 700px;
                    letter-spacing: 3px;
                    font-size: 25px;
                    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
                }
                .header-container{
                    width:100%;
                    height:478px;
                    border-left:none;
                    border-right:none;
                    position: relative;
                    padding: 20px;
                    border:1px solid redred;
                    background-color:black;
                    z-index: -2;        
                }

                .video-container{
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width:100%;
                    overflow: hidden;
                    border:1px solid red;
                    background-color:black;
                    z-index: -2;        
                }

                video{
                    position: absolute;
                    z-index: -1;
                    opacity: 0.98;
                    width: 100%;
                    border:1px solid blue;
                }
                </style>
            </head>
            <body>
                <div class="header-container">
                    <div class="video-container embed-responsive embed-responsive-16by9">
                        <video class="embed-responsive-item" preload="true" autoplay="autoplay" loop="" volume="0" muted poster="pic.jpg">
                            <source src="../media/bbb.mp4" type="video/mp4">
                            <source src="../media/bbb.webm" type="video/webm">
                            <source src="../media/bbb.ogv" type="video/ogg">
                        </video>
                    </div>
                    <h3>Welcome to the world of wonders</h3>
                </div> <!-- header container div-->
            </body>
            </html>

如何确保视频在所有浏览器中保持全宽？

Answer 1

在.header-container的左侧和右侧放置一个填充。 my $json_structure = { 'name' => $user, 'size' => $data->{$user}->{size}, 'children' => [], }; process_data_to_json( $json_structure, $data->{$user}->{children} ); open( my $json_out, '>', "homedir.json" ) or die $!; print {$json_out} to_json( $json_structure, { pretty => 1 } ); close($json_out); sub process_data_to_json { my ( $json_cursor, $data_cursor ) = @_; if ( ref $data_cursor eq "HASH" ) { print "Traversing $key\n"; my $newelt = { 'name' => $key, 'size' => $data_cursor->{$key}->{size}, }; push( @{ $json_cursor->{children} }, $newelt ); process_data_to_json( $newelt, $data_cursor->{$key}->{children} ); } }。看看fiddle。如果您希望文本保持在顶部，请删除h3中的位置：absolute，并将其更改为relative。

使用bootstrap消除HMTL5视频嵌入的宽度（使其为100％）的间隙

1 个答案: