Issue with Bootstrap 3: Certain videos are not fully filling the parent div

I am working on a grid of videos that need to be displayed side by side, so I have set both padding and margin to 0 using Bootstrap.

However, I am facing an issue where the videos initially fill the parent div completely but when they start playing, some videos shrink causing white gaps in the div, which is not desired.

It seems like the CSS rules are not being followed properly or it could be a video aspect ratio problem for which I don't know how to find a solution.

You can view an example of the problem on JSFiddle here.

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <div align="center" class="embed-responsive embed-responsive-16by9" >
        <video class="embed-responsive-item" autoplay loop poster="http://thumbs.gfycat.com/<%= title %>-thumb360.jpg">     
                <source src=<%= gif.webmurl %> type="video/webm">
                <source src=<%= gif.mp4url %> type="video/mp4">
        </video>  
    </div>
 </div>
htmlcsstwitter-bootstrap

Answer №1

It's important to ensure that all videos are consistently formatted and of the same quality.

When the video quality varies, the video player will adjust accordingly to accommodate those changes.

Answer №2

To eliminate the extra white space, simply adjust the display property of the .embed-responsive .embed-responsive-16by9 div container to flex;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to make my navigation fill the entire height of the header?

I am trying to create a navigation menu within a header div where the list items are displayed horizontally inside a ul element. I want these list items to be 100% the height of the header. Despite trying to set the height to 100% on various elements such ...

htmlcss

Creating a dynamic collection of N triangles in a container using CSS

In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...

cssvue.js

Customizing the appearance of ASP.NET file uploader for various sizes

Has anyone successfully changed the width of the ASP.NET file uploader? I attempted by adding the CssClass, but it did not work. Is there an alternative method to adjust the width? Thanks in advance. ...

asp.nethtmlfile-uploadcss

Tips for adding content to a textarea with JavaScript without disrupting the editing history

I have a specific requirement where I want the user to be able to highlight text in a textarea, then press ctrl + b to automatically surround that selected text with stars. Here is what I envision happening: 1) The initial content of the textarea is: "he ...

javascripthtmltextareaundo-redo

Decrease in font size observed after implementing Bootstrap 5

The issue arises when I include the Boostrap CDN link, resulting in a change in font size. I discovered that Bootstrap has a default font size, which is why attempts to adjust it using an external style sheet with !important do not succeed. Interestingly, ...

htmlcssbootstrap-5font-sizecss-specificity

CSS animations are only functional when the Developer Tools are activated

I recently implemented a transition to uppercase in CSS, but it seems to only work when I open dev tools in Mozilla and not at all in Chrome. This is my first attempt at using animations in CSS, so any feedback on my code is appreciated. I'm curious ...

csscss-transitions

Why is my DIV not registering clicks when I try to interact with it?

Trying to implement a Javascript click event <script type="text/javascript"> $(document).ready(function () { $(".role").click(function () { alert("idiot"); }); }); </script> Here is the CSS code for styling the DIV with clas ...

jqueryfunctionhtml

What's preventing me from invoking this object's function through an inline anchor?

CSS: <div class="box"> <p>This is a box</p> </div> Javascript: var box = { content : (function() {return ("This is the content of the box")}) }; alert("Box content: \n" + box.content()); $("output").text( +"<br/ ...

javascripthtmlcssjsfiddle

Accordion menu with smooth CSS3 transitions

I created a unique accordion menu to replace the select form control, and I am interested in using CSS3 transitions to give it a smooth expand and contract effect. Feel free to check out my work on jsfiddle: http://jsfiddle.net/hKsCD/4/ In order to achi ...

jquerycsscss-transitions

What could be the reason why my buttons are not responding to the ActionListener?

I am encountering some difficulties in making things happen when I click a button. This is where the buttons are declared: public class DoND extends JFrame implements ActionListener { public JButton btnsuit1, btnsuit2, ... , btnsuit26; public static ...

javacssswingbuttonactionlistener

What is the best way to divide my HTML page in half?

My goal is to display two maps side by side, one on the right and the other on the left. However, when I try to implement this, one map appears on top of the other. I believe that CSS positioning can help me achieve the desired layout, but as a beginner in ...

javascripthtmlcssgoogle-maps-api-2

Could it be that my font awesome icons aren't displaying because of my use of xampp?

I am currently working on building a website, but I have encountered two main issues. Firstly, I have to clear my web cache every time I search for something. Secondly, the font-awesome icon is not showing up properly. <html lang="en"> &l ...

htmlfont-awesome

Why doesn't the CSS height of Textarea work in Internet Explorer versions 6 and 7?

Here is my code: <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { background: n ...

cssinternet-explorer-7internet-explorer-6

Clicking the delete button will halt the process once the user cancels the confirm alert

The website is now capable of extracting API data and displaying it in a table. Additionally, users can delete rows from the table by clicking on a button. (pic) Table and alert display after clicking the delete button Q: If I click cancel on the alert, ...

javascripthtmljqueryajax

A variable in Javascript storing data about jQuery DOM elements

Currently, I am using the slick slider for my development (http://kenwheeler.github.io/slick/) In JavaScript, there is an event that returns a variable called 'slick' When I print the variable using console.log, this is what I see: https://i.s ...

javascriptjqueryhtmldomslick.js

HTML: Unable to align text in the center using the <div> tag

Working on a website for our Roblox group I've been attempting to center this text (and the button below), but it just doesn't look right... Check out this image Although it technically "centers", something still seems off. I've searched h ...

htmlcss

Combining multiple columns into a single column in Laravel: A comprehensive guide

Here is the code snippet from my controller: public function search(request $request) { $request->flash(); $search = $request->get('q'); $vehicles = vehicle::where('make', 'LIKE', '%'.$search. &apo ...

phphtmlsqllaravel

What is the best way to make the background color of section 1/2 cover the entire screen?

Is there a way to make the background color of section 1/2 fill the entire screen? Check out this link for more information. <div id="sections"> <div class="section one"> <a href="#section two"> <i class="fa fa-an ...

css

Issue with Braintree drop-in form: Nonce string generation problem

I've encountered a peculiar issue while trying to utilize the dropin form from Braintree. Successfully integrating the form into a view, here's how it looks: <form id="createTransactionForm" method="post" action="#&qu ...

javascripthtmlasp.net-mvcformsbraintree

Working with HTML content within a variable using jQuery

My dilemma lies in a variable containing a snippet of HTML: <p>this is a test</p> <ul> <li>test1</li> <li>test2</li> <li>test3</li> </ul> <p>more content</p> <ol> <li>numb ...

javascriptjqueryhtml