CODEWITHSUNDEEP
htmlcssvideo-streamingcss-multicolumn-layout
diplodorkus
diplodorkus

Reputation: 180

Videos in CSS columns not arranging correctly

I have a 3-column layout which I want populated with a variable number of videos (usually a multiple of 3). I'd like the videos to distribute themselves across the columns in such a way that each column is of equal height.

This isn't a problem if I'm using 6, 9 or 12 as the number of videos, but if I set it to 3, the columns don't distribute correctly, like this:

Column 1 | Column 2 | Column 3
[video 1]  [video 3]
[video 2]

Where it should be:

Column 1 | Column 2 | Column 3
[video 1]  [video 2]  [video 3]

Is this something I should be using a table for instead? I've had trouble with them in the past, which is why I opted for columns in this instance, but now I've hit a bit of a wall... I'm currently using column-width to keep things responsive-friendly, I'm not sure how exactly that would work in a table layout.

My HTML is something like this:

<div id="videoContainer">
  <iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
  <iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
  <iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
</div>

With CSS like this:

#videoContainer {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  column-width: 300px;
}

Upvotes: 0

Views: 863

Answers (1)

ddr45
ddr45

Reputation: 143

Link to JSFiddle

If you add the following to #videoContainer it should work

display: flex;

Upvotes: 1

Related Questions