Support » Plugin: WP Featherlight - A Simple jQuery Lightbox » Unable to get video to fit screen size

  • Resolved Janek Krause

    (@janekkrause)


    Hi, I’ve just started using Featherlight and am trying to open a video in a lightbox at 85vw and 85vh. I’ve followed the steps outlined in your documentation. https://github.com/noelboss/featherlight/#usage

    However it simply doesn’t work. Are you able to test the code you’ve listed under the video section and confirm it’s working on your end?

    Thanks for your help in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Ozzy Rodriguez

    (@ozzyr)

    Hi Janekkrause,

    We just made an update to this plugin which updated to the latest version of the script. This could solve your problem.

    Could you update to the latest version of this plugin and give it a try?

    Thanks,
    Ozzy

    Hey Ozzy,

    I managed to force the correct sizing through targeting the embedded video element with CSS using the following.

    .featherlight-iframe .featherlight-content {
    	overflow:visible;
    }
    
    .featherlight.video  .featherlight-inner {
       margin:0;
    	padding:0;
        min-height: 100vh;
        min-width: 99vw;
    }
    
    .featherlight.video .featherlight-content {
    	max-width:100vw;
    	max-height:100vh;
    }

    If I remove any of this code it falls back to being a tiny size.

    The code I’ve tried in the past to display the video in featherlight is:

    <a href="https://www.youtube.com/embed/PGbkXWmRqTQ?rel=0&autoplay=1&showinfo=0&controls=0" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true" data-featherlight-variant="video" data-featherlight-close-icon="'fullscreen_exit'" data-featherlight-iframe-style="position:fixed;background:#000;border:none;top:0;right:0;bottom:0;left:0;width:100%;height:100%;">

    At the moment I’ve removed the featherlight iframe style since it doesnt seem to do anything and used my custom CSS to apply styling.

    You can see how it works in its current state on my clients site with the custom CSS.
    https://www.fighterpilotpodcast.com/ just click the experience button top right.

    Plugin Author Ozzy Rodriguez

    (@ozzyr)

    Hi janekkrause,

    I tried the code that includes the data-featherlight-iframe-style you gave us with version 1.3.0 of the plugin, you’re currently running 1.2.0, and it’s working as expected, although your workaround works as well!

    Thanks,
    Ozzy

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Unable to get video to fit screen size’ is closed to new replies.