lazyYT icon indicating copy to clipboard operation
lazyYT copied to clipboard

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

Open jkdel opened this issue 9 years ago • 5 comments

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: capture du 2016-01-03 19-20-15

when resizing the window, everything is displayed in one column and the image appears: capture du 2016-01-03 19-20-38

jkdel avatar Jan 03 '16 18:01 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 avatar Jan 03 '16 19:01 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 avatar Jan 03 '16 19:01 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...

jkdel avatar Jan 03 '16 20:01 jkdel

@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.

Daugilas avatar Mar 06 '16 00:03 Daugilas

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

jkdel avatar Mar 24 '16 18:03 jkdel