CODEWITHSUNDEEP
cssvideo
user6902601
user6902601

Reputation: 123

How to make video responsive but still watchable?

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

Upvotes: 1

Views: 180

Answers (1)

Rahul Bharadwaj
Rahul Bharadwaj

Reputation: 2774

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).

Upvotes: 1

Related Questions