1

I made a video responsive in Bootstrap with the following code:

<div class="embed-responsive embed-responsive-16by9">
     <video src='#' width='640' height='360'>
</div>

The code works perfectly and correctly is responsive. Butt he video itself isn't centered and isn't showing me the entire video. Only a small part of it. It's kind of hard to explain. I've included two screenshots of the same video and time of the video but on different screen sizes.

How do I center the video and still keep my current responsiveness for the video?

enter image description here enter image description here

user6902601
  • 123
  • 2
  • 10

1 Answers1

1

Check this fiddle: fiddle
Your <div> is bootstrap responsive, but you also need to make your video tag responsive, so the Video tag embedded will be: 

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src=your_video_url type=video/mp4>
    </video>
</div>

You can remove autoplay loop in video tag, it'll prevent video from autoplay as soon as page is opened and removing loop will prevent the video from repeating itself over and over again (until paused).

Rahul Bharadwaj
  • 2,555
  • 2
  • 18
  • 29
  • Another post here references this same fix with a little more discussion and information: http://stackoverflow.com/questions/26040136/bootstrap-3-responsive-mp4-video – Nathaniel Flick Apr 28 '17 at 04:13