...">
Clever Geek Handbook

Iframe escapes css columns in chrome

I am trying to set up iframes inside a 3 column grid.

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:

enter image description here

I want it to be like:

enter image description here

But the problem is the iframe is jumping out of the grid. Here is my JsFiddle to show you this is happening. As you can see, the first "box" is working fine (as expected), but in the next two rectangles to the right, the iframe escapes?

+3


source to share


2 answers


Adding:

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


Solved my problem with this !

+2


source


Changed your code by adding a 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>
Run codeHide result


Will this solve your problem?

+2


source






More articles:


All Articles