video position:absolute; dont show video on lightbox (Resolved)

[maurestor]

Hello, how can I modify the value of absolute position in
// photoswipe-video-plugin.esm.js:193
...
content.element.style.position = 'absolute';
...

within the plugin because I already tried to modify my script in astro and use various tags in ccs but it does not change the property.

<style>
.pswp__zoom-wrap video {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
 }
</style>

dont change property

When I change
<video controls="" playsinline="" preload="auto" poster="http://localhost:4321/favicon.svg" src="/video/persianas_a01.mp4" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 600px;"></video>

to

<video controls="" playsinline="" preload="auto" poster="http://localhost:4321/favicon.svg" src="/video/persianas_a01.mp4" style="position:relative; left: 0px; top: 0px; width: 800px; height: 600px;"></video>

the video show correctly

What can I do to modify that property or delete it from my astro file?

const vidPers = ["/video/persianas_a01.mp4", "/video/persianas_a03.mp4"];
---
<div id="the-gallery" class="columns-2 sm:columns-3 md:columns-4 gap-1 pb-10">

            {
                vidPers.map((vid) =>(
                    <a 
                        href={vid}
                        data-pswp-video-src={vid}
                        data-pswp-width="800"
                        data-pswp-height="600"
                        data-pswp-type="video">
                        <img src="favicon.svg" alt="Video"/>
                    </a>
                ))
            }
</div>
<script>
    
    import "photoswipe/style.css";
    import PhotoSwipeLightbox from 'photoswipe/lightbox';
    import pswpModule from "photoswipe";
    
    import PhotoSwipeVideoPlugin from 'photoswipe-video-plugin';
    
        const lightbox = new PhotoSwipeLightbox({
        pswpModule,
        gallery: '#the-gallery',
        children: 'a',
    });
    
    const videoPlugin = new PhotoSwipeVideoPlugin(lightbox, {
      // options
      
    });
    lightbox.init();

    const videoTags = document.querySelectorAll('.pswp__zoom-wrap video');

    videoTags.forEach((videoTag) => {
        videoTag.style.position = 'relative';
        videoTag.style.left = 'auto';
        videoTag.style.top = 'auto';
        videoTag.style.width = '100%';
        videoTag.style.height = '100%';
    });
</script>


<style>
    div.pswp__zoom-wrap video{
        position: relative !important;
    }
    div.pswp-video { 
        position: relative !important; 
    }
    video {
        position: relative !important;
    }
    .pswp__zoom-wrap video {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }
</style>

[maurestor]

Ok, I solved it by using the css declaration in a separate style.css sheet (my case Layout.css) on /src/styles/Layout.css

Layout.css
...
.pswp__zoom-wrap video {
position: relative !important;
}
...