3

I am trying to set up Iframes inside a grid with 3 columns.

HTML

<div id="blogPosts">

    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>

    ...
</div>

CSS

#blogPosts {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%;
}
.blogPost {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}

What it is like:

enter image description here

What I want it to be like:

enter image description here

But the problem is, is that the iframe jumps out of the grid. Here is my JsFiddle to show you it happening. As you can see the first 'box' works fine (as expected) but the next two boxes to the right, the iframe escapes?

maxisme
  • 3,974
  • 9
  • 47
  • 97
  • Do you need to use the column property or could you use another solution to the problem? – brance May 11 '15 at 11:27
  • I think I need the column property it is so close to what I actually want, it is just the iframe running away... So strange!! – maxisme May 11 '15 at 11:30
  • I can’t really see anything wrong with any of the videos, using Firefox 37. What do you mean by “the iframe escapes”? What exactly happens and what do you expect to happen? And what browser are you using? – Sebastian Simon May 11 '15 at 11:30
  • @Xufox have you seen the jsfiddle? – maxisme May 11 '15 at 11:36
  • 1
    @Xufox please see added images above – maxisme May 11 '15 at 11:40
  • Yep, that’s what I thought… what browser are you using? Chrome 42? It looks perfectly fine on Firefox 37. – Sebastian Simon May 11 '15 at 11:42
  • 1
    Chrome!! it is weird because I adjusted the width on jsfiddle slightly and that is how I got the **"What I want it to be like"** (AKA it worked) but I have changed the width on the chrome browser and it doesn't change! – maxisme May 11 '15 at 11:43
  • tested on Safari and works perfectly! (and all this time I thought Chrome was god) – maxisme May 11 '15 at 11:47

2 Answers2

4

Adding:

iframe{
    transform: translate3d(0,0,0);
}

Solved my problem with help from this !

Community
  • 1
  • 1
maxisme
  • 3,974
  • 9
  • 47
  • 97
  • if iframe already has transform and this is still occurring, using it on the parent fixed my issue. Thanks! – darcher Jan 03 '19 at 21:42
2

Modified your code by adding position to the blogpost Class.

#blogPosts {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;

}
.blogPost {
      display: inline-block;
  margin-bottom: 20px;
  width: 32.1%;
  position: absolute;
}

.blogPost:nth-child(1){
left: 34.2%;
}
.blogPost:nth-child(2){
left: 67.1%;
}
<div id="blogPosts">
    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>
    
    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>
    
    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>
</div>

Will this solve your problem?

Govind
  • 162
  • 10
  • Why are the widths pretty random percentages? How did you come up with them? – maxisme May 11 '15 at 12:24
  • I added the same code in [https://jsfiddle.net/4ejrd6g2/] Its working. Actually the width and left value you can equalize and add. – Govind May 11 '15 at 12:30
  • I have added a few more posts and look what [happens](https://jsfiddle.net/4ejrd6g2/2/) – maxisme May 11 '15 at 12:35
  • Refer this post(http://stackoverflow.com/questions/15808185/bug-with-youtube-embed-when-using-css-column-count). My suggestion is ... its a known issue around Youtube and chrome. You have to go with other approach. by controlling through width instead of column count in CSS – Govind May 11 '15 at 12:39