bootstrap embed-responsive does not work with css column-count. For example:
/** Divide the target element into <number> columns */
.columns {
-webkit-column-count: 4;
-webkit-column-gap: 10px;
/*-webkit-column-fill: auto;*/
-moz-column-count: 4;
-moz-column-gap: 10px;
/*-moz-column-fill: auto;*/
column-count: 4;
column-gap: 15px;
/*column-fill: auto;*/
}
.video-box {
border: 1px solid red;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="columns">
<div class="video-box">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qYv5R_e5hTM" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="video-box">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/feQ99SuGdsw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="video-box">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/r_KEWddTrVc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>Result:
The second and the third videos are being not displayed!
Any ideas why and how I can get around to it?
NOTE:
It seems it is a bug on Chrome. Firefox is fine.
