if used in chrome with (css) columns and not in the first column, the video stays black

[jkdel]

i'm using lazyYT to lazyload videos inside of a div with following style:

.post-content.post-column {
  -webkit-columns: 420px 3;
  -moz-columns: 420px 3;
  columns: 420px 3;
  -webkit-column-gap: 10%;
  -moz-column-gap: 10%;
  column-gap: 10%;
}

this isn't a problem in firefox but in google chrome the video frame stays black when not in the first column. In epiphany (webkit based browser), i'm not having this problem.

this is what it looks like:

when resizing the window, everything is displayed in one column and the image appears:

[jkdel]

overriding the overflow css property of .lazyYT and .lazyYT-container to visible (set to hidden by lazyYT.css) makes the background image show up, but the play button is still hidden.

[jkdel]

overriding the transform css property of .lazyYT-image-loaded > button to initial (set to scale(0.61), scale(0.85) or unset by lazyYT.js, depending on the container width) makes the play button appear.

[jkdel]

this bug also exists in opera, so other webkit browsers are also affected. I added following rules to my css file:

@supports (-webkit-appearance:none) {
  .lazyYT, .lazyYT-container {
    overflow: visible !important;
  }
  .lazyYT-image-loaded > button {
    transform: initial !important;
  }
}

of course the play button isn't scaled anymore, but at least it works...

[Daugilas]

@jkdel thanks for sharing this bug. Could you please post a URL of your page? I'd love to check it a bit deeper and make a proper commit fixing this issue.

[jkdel]

@Daugilas sorry it took so much time, the URL is www.theyssamy.fr