Does Jquery not work within a function of the Unite Gallery plugin?

Question

I’m using the plugin Unite Gallery when click the button, open a lightbox and show a video.

Follows the HTML

<button type="button" class="btn custom-btn-modal" onclick="api.toggleFullscreen()">
                <div class="effect animacao-grow"></div>                    
                    <i class="fas fa-play text-white"></i>              
            </button>

            
            <div id="gallery"> 
                <div data-type="html5video"
                     data-image="../video/img-fallback-para-navegador-que-nao-suporta-video.jpg"
                     data-videoogv="../video/custom.ogv"                    
                     data-videomp4="../video/custom.mp4"
                     data-title="Birds"
                     data-description="html5 video description"></div>      
            </div>

Follow the JS code

<script type="text/javascript"> 

    var api;

    $(document).ready(function(){
        api = $("#gallery").unitegallery();
        $(".ug-gallery-wrapper").hide();


        api.on("enter_fullscreen", function(){  //on enter fullscreen
            $(".ug-gallery-wrapper").show();
        });
        console.log(api);
    }); 

</script>

If I don’t use the .hide() of jQuery the video keeps appearing on the screen, and I would like it to appear only when I click the button on fullscreen.

API I am using: http://unitegallery.net/index.php?page=examples-api

One of the functions of API that’s the one api.toggleFullscreen(). I’m using for when click the button, open the Fullscreen and show the video on large screen.

If I don’t use Hide, the video is below the button:

Using the Hide, I can hide, but even using the show within the function, it does not show the video when the screen gets large.

^{Click on the image to view it in its original size}

Can someone help me understand why?