Can't use column-count CSS property with iframe

Question

SUMMARY

I'm using column-count CSS property to achieve a layout design like pinterest. But because of column-count if I put an Youtube Embed <iframe>, this iframe is disappearing. Can you tell me why it's disappearing?

DETAILS

I follow this example for my grid layout. It's working good. But when I put and Youtube video iframe instead if <img>, it's disappearing when it's start playing. Here is an example from my code (I didn't put all styles so you won't confuse). As you can see it's disappearing when video starts playing. But when I remove *-column-count lines from css, it's working. But this time I'm losing Pinterest style .

@Fury, you are right but unfortunately I need to use it. Because I'm developing this theme for non-technical customers. So they just want to use it, because when they click to *Share* button on Youtube, it's giving `` code. In last chance, I'll use another options but I want to know if I can do it with `<iframe>`` — Eray, Feb 06 '15 at 17:11

score 4 · Answer 1 · edited May 23 '17 at 12:29

4

That's a bug with Chrome and CSS columns. It only works if the video shows on the first column.

CSS columns implementation is not really ready for production.

Adding transform: translate3d(0,0,0); to iframe CSS solved this issue for me.

Found out about it here.

edited May 23 '17 at 12:29

Community

1
1

answered May 25 '15 at 12:58

Narayon

415
3
12

score 1 · Accepted Answer · answered Feb 06 '15 at 17:11

http://jsfiddle.net/xny8yys2/1/

Ok, This was pretty messy. Try making your code clean because it makes debugging way easier. The issue here was two-fold.

.blog-list-template-pin img This should include the iframe element if you want to use iframes in the columns
Additionally, you added an inline css background-image to one of the columns parent div.
Lastly, I recommend using display css for column structuring in a pinterest style. Same result, more backwards compatibility.

.blog-list-template-columns {
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
}
.blog-list-template-pin {
  display: inline-block;
  /*box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);*/
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  border: 1px solid #d7d7d7;
  margin-bottom: 5px;
}
.blog-list-template-pin img,
.blog-list-template-pin iframe {
  width: 100%;
}
.blog-list-template-pin .blog-list-template-pin-detail {
  padding: 30px;
}
.blog-list-template-pin .heading {
  margin-bottom: 0;
  font-weight: 700;
}
.blog-list-template-pin .post-date {
  color: #f03236;
  font-size: 12px;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
}
.blog-list-template-pin .post-excerpt {
  font-family: "Lato", sans-serif;
  color: #515151;
  margin-top: 20px;
}
.blog-list-template-pin .author {
  font-family: "Raleway", sans-serif;
  color: #b8b8b8;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 13px;
  display: block;
}
.blog-list-template-pin .read-more {
  margin-top: 30px
}
.blog-list-template-pin .read-more:hover {
  color: #f03236;
  text-decoration: none;
}

<div class="container" style="margin-top: 35px">
  <div class="row blog-list-template-columns">
    <div class="blog-list-template-pin">
      <img src="img/pin2.jpg" alt="" class="img-responsive">
      <div class="blog-list-template-pin-detail">
        class="heading">TITLE</h5>
        <span class="post-date">29 DECEMBER 2014</span>
        <span class="author" style="margin-top: 20px">POSTED BY AUTHOR</span>
        <a href="" class="button-full-white read-more">READ MORE</a>
      </div>
    </div>
    <div class="blog-list-template-pin full-bg-pin">
      <iframe width="367" height="206" src="https://www.youtube.com/embed/YJVmu6yttiw?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0"></iframe>
      <div class="blog-list-template-pin-detail">
        <h5 class="heading">TITLE</h5>
        <span class="post-date">29 DECEMBER 2014</span>
        <span class="author" style="margin-top: 20px">POSTED BY AUTHOR</span>
        <a href="" class="button-full-white read-more">READ MORE</a>

      </div>
    </div>
    <div class="blog-list-template-pin">
      <iframe width="367" height="206" src="https://www.youtube.com/embed/YJVmu6yttiw?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0"></iframe>
      <div class="blog-list-template-pin-detail">
        <h5 class="heading">TITLE</h5>
        <span class="post-date">29 DECEMBER 2014</span>
        <span class="author" style="margin-top: 20px">POSTED BY AUTHOR</span>
        <a href="" class="button-full-white read-more">READ MORE</a>

      </div>
    </div>
  </div>
</div>

Can't use column-count CSS property with iframe

2 Answers2