CODEWITHSUNDEEP
htmlhtml5-videobootstrap-4
Jordan
Jordan

Reputation: 919

Making HTML5 Video Respect Parent Height / Width

I have a bootstrap card. One containing a video, one below that containing text. The card containing the video is written as:

<div class="card video-card">
    <div class="card-body">
         <video width="100%">
                <source src="/request/video/SampleVideo.mp4" type="video/mp4">
                    Your browser does not support HTML5 video.
         </video>
    </div>
</div>

and whilst loading, looks like this:

Before the Video has Loaded

The problem, is that when the video loads, it increases the height of it's parent container (the boostrap card), subsequently pushing down the text card below it. This causes my layout to overflow as follows:

After the video has loaded I assume it is doing this because it needs to maintain its aspect ratio. However, is there any way I can 'stretch' the video instead in order to ensure that it respects the width / height of the bootstrap card?

I'd rather know that the layout will be okay and make the effort to edit the videos at a matching aspect ratio.

Thanks.

Upvotes: 2

Views: 2235

Answers (2)

Edidiong Udoh
Edidiong Udoh

Reputation: 21

I just realized bootstrap can help it do so. Add the img-fluid class to video as in

<div class="card video-card">
    <div class="card-body">
         <video class="img-fluid" width="100%">
                <source src="/request/video/SampleVideo.mp4" type="video/mp4">
                    Your browser does not support HTML5 video.
         </video>
    </div>
</div>

Upvotes: 0

Jordan
Jordan

Reputation: 919

HTML5 Video does not have the capability to stretch video to fit the parent container. Link to similar question.

Upvotes: 1

Related Questions