Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 3, 2022 at 1:37 pm #1338682
    InTraHealth-Envold

    Hey there,

    we got some videos on our site which should open in lightbox. When clicking on it, the lightbox opens put the screen keeps dark without showing a spinning wheel or any other loading icon. Unfortunately we can’t compress the video files any more…

    How can we get a spinning wheel or any other icon showing on loading the video file?

    February 4, 2022 at 12:45 pm #1338884
    Ismael

    Hey InTraHealth-Envold,

    Thank you for the inquiry.

    You can apply a preloader background to the iframe with css, which will display only until the video start playing.

    .mfp-iframe-scaler iframe {
    background: url('/images/v2/loading.gif') no-repeat scroll center center #000000 !important;
}

    Just replace the background url value above with the actual image URL.

    Best regards,
    Ismael

    February 17, 2022 at 12:23 pm #1341106
    InTraHealth-Envold

    Hey Ismael,

    thanks for your reply.
    We will try this :)

    February 17, 2022 at 3:00 pm #1341172
    InTraHealth-Envold

    Hey Ismael,

    when I use the Google dev tools the approach works. But when I insert the CSS into our style.css nothing happens.
    It seems to be overridden completely.
    This is what I find in dev tools for the iframe-scaler:

    .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgb(0 0 0 / 60%);
    background: #000;
}
    February 18, 2022 at 6:05 am #1341280
    Ismael

    Hi,

    Thank you for the update.

    Did you toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css? The css modification that we recommended above should take priority because we defined the !important rule or property in the css rule. It should override the default background of the .mfp-iframe-scaler iframe element.

    Best regards,
    Ismael

    February 21, 2022 at 6:31 pm #1341710
    InTraHealth-Envold

    Hi,

    The File Compression Settings are enabled, we did not change those.
    I am very confused why this is not working since we use the !important rule for other CSS as well.

    February 23, 2022 at 5:20 am #1341929
    Ismael

    Hi,

    Thank you for the info.

    The File Compression Settings are enabled, we did not change those.

    You may need to disable the file compression settings temporarily after adding the css. And make sure that there are no invalid css code in the Quick CSS field and in the child theme’s style.css file. Please make sure to purge the cache before checking the page.

    Best regards,
    Ismael

    February 28, 2022 at 2:07 pm #1342560
    InTraHealth-Envold

    You may need to disable the file compression settings temporarily after adding the css.

    This did the trick – thanks a lot!

    March 1, 2022 at 5:46 am #1342646
    Ismael

    Hi,

    Glad it helped. You can reactivate the file compression settings once you are finished editing the site. Please feel free to open another thread if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Spinning wheel not showing on loading video in lightbox’ is closed to new replies.