Search code examples
twitter-bootstrap-3html5-videoembedding

Why is my embedded & responsive video not responsive?

I have a video that is meant to appear in all screen sizes (except xs) over 4 columns. The code below isn't responsive, displaying the video VERY large. Tearing my hair out, need help!

<div class="hidden-xs col-sm-4 embed-responsive-16by9">
  <video class="embed-responsive-item" title="Former Balmain Massage therapist Blaise Bowling shows the ins and outs of pregnancy massage" poster="../../images/blaises_pregnancy_poster.jpg" controls  src="../../video/pregnancy360.mp4" type="video/mp4">
</video>
</div>

The original video is barely 360px wide and it's rendered far too big... The page is at https://balmainmassage.com.au/2015/modalities/pregnancy.html

Thanks

Claudio

Solution

  • In your html, I assume you have this in your <head> :

    <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

    You should put your video in a <div> something like this:

    <div class="responsive_video">                              
<video src="yourfolder/yourvideo.mp4" controls="controls" type="video/mp4" </video>     
</div>

    Then, you should have this under your @media only screen and (max-width : 960px) in the bottom of your css:

    @media only screen and (max-width : 960px) {

    .responsive_video video{
        width:100%;
                }
}