Question

我正在我的主页上显示视频，并希望视频占据屏幕宽度的100％，但只有300px高度或屏幕的一半。但是，当我更改height属性时，视频宽度会缩小。以下是我的HTML＆amp; CSS

HTML

<div class="container-fluid video-container">
            <video poster="http://www.example.com/abc.png" preload="auto" autoplay="autoplay" loop="loop" muted="muted">
                <source src="http://www.example.com/abc.mp4" type="video/mp4">
                <source src="" type="video/webm">
                <source src="" type="video/ogg">
            </video>
            <div class="row video-text">
                <h2>Welcome to My Site</h2>                    
            </div>
        </div>

CSS

.video-container { padding: 0px; color: #FFF; height: 700px; vertical-align: middle; }
video { position: absolute; min-height:100%;min-width: 100%; z-index: -99; }
.video-text { width: 100%; text-align: center; padding-top: 40px; }
    .video-text h2 { text-transform: uppercase; }

任何解决方案？

使用Bootstrap限制ASP.Net中的视频高度

0 个答案: