Video cover div

by Unknown Tuesday, April 05, 2016 0 comments CSS

<style type="text/css" >
    .banner-video {
        position: relative;
        height: 500px;
        width: 100%;
    }
    .banner-container {
        height: 500px;
        width: 100%;
        bottom: 0;
        left: 0;
        overflow: hidden;
        position: absolute;
    }
    .banner-video__video {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
</style>

<div class="banner-video">
    <div class="banner-container">
        <video autoplay loop muted class="banner-video__video">
            <source src="/video/banner-video.mp4" type="video/mp4">
            <!-- <source src="movie.ogg" type="video/ogg"> -->
            Your browser does not support the video tag.
        </video>
    </div>
</div>