0

I am displaying a video on my homepage and want the video to take 100% width of the screen but only 300px height or half the screen. However, when I change the height property, the video width shrinks. Below is my HTML & 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; }

Any solutions?

Nitesh
  • 2,286
  • 2
  • 43
  • 65

0 Answers0