CODEWITHSUNDEEP
htmltwitter-bootstrap-3responsive-designhtml5-video
Tom Carter
Tom Carter

Reputation: 155

How to make a responsive HTML5 video center on screen,

Using Bootstrap 3 I have managed to get a respinsive video working on my homepage, you can see it working here: http://www.infiniteideamedia.com/test/ The only issue I'm having with it is that on devices smaller than video width (1280px) the video is cut off on only 1 side. I would prefer it kept the video center and cut the video off both sides. Is this possible? Its the same issue with poster which is shown instead on iOS devices instead of the video. Here's the code in place at the moment:

HTML:

<div id="vid">
        <video autoplay loop poster="img/Poster.jpg">
          <source src="img/homevideo.webm" type="video/webm"/>
          <source src="img/homevideo.mp4" type="video/mp4"/>
        </video>
        </div>

CSS:

#vid
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
#vid video {
width:auto;
min-width:100%;
height:auto;
min-height:500px;
}

I've come to the conclusion that I might need to use an JS alternative, any tips on how to implement that would be great.

Upvotes: 2

Views: 4516

Answers (2)

Tom Carter
Tom Carter

Reputation: 155

After a bit research, another post on here actually. Doing this does what I need:

position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;

Upvotes: 3

Christina
Christina

Reputation: 34652

Doing what you propose, I've never seen it unless it's a background image. Under the size where it it starts going left, you can use responsive embedding. Otherwise, there's a lot of math, you'd essentially have to pick some min-widths or max-widths and start positioning the #vid outside the viewport but by how much would have to be guessed.

DEMO: https://jsbin.com/zowuze/1/

#vid {
    position: relative;
    padding-bottom: 40%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}
#vid video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-width:1280px) { 
    #vid {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        padding: 0;
        height:500px;
    }
    #vid video {
        width: auto;
        min-width: 100%;
        height: auto;
        position: static;
    }
}

Upvotes: 0

Related Questions