Jump to content

Bootstrap - BG video


No1ukonw

Recommended Posts

How do you adjust the size of the "height" of the video? I have been able to add a video as my background but it fills the whole monitor screen. the video is 1280 X 720 native but fills my 1920x1080 montior. I would like it to fill the width but only fill 500ish (height) of the screen.

 

As you can see I have tried multiple ways by the code below:

 

<style type="text/css">
video#bgvid {
/* position: fixed; right: 0; bottom: 0; */
/*position: absolute^/
right: 0; bottom: 0;
/* min-width: 100%; min-height: 100%; */
/* width: auto; height: auto; z-index: -100; */
/*width: auto; height: 700px; z-index: -100;*/
width:100%;
background: url(wildlife.jpg) no-repeat;
/*background-size: cover; */
background-size: contain;
/*overflow:hidden*/
}
</style>
-----
<div class-"container-fluid">
<div class="row">
<video autoplay poster="wildlife.jpg" id="bgvid">
<source src="wildlife.mp4" type="video/mp4">
</video>
</div>
</div>
Thanks.
Link to comment
Share on other sites

.bgvideo-container {    width:    height: 500px;    position: relative;    overflow: hidden;}.bgvideo {    width:100%;    background-size: cover;    position: absolute;    top: 0;    left: 0;}

Try this...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...