I am facing an issue with resizing multiple videos within a Bootstrap grid. The problem is that the column size increases, but the video itself does not resize accordingly.
In my CSS file, I have set the width and height of the gif-video class to 300 for a grid format display.
Here is an image illustrating the problem.
When I change the width and height of the gif-video class to 100%, the size appears correct but there are empty spaces as if the div was pushed down.
Check out this image showcasing the issue.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<video class="gif-video" autoplay loop poster="http://thumbs.gfycat.com/<%= title %>.jpg">
<source src=<%= gif.webmurl %> type="video/webm">
<source src=<%= gif.mp4url %> type="video/mp4">
</video>
</div>
</div>
</div>