javascripthtmlvideomagnific-popup

Magnific popup working only in bigger screen


It is working on my screen and some of the testers screen but some of the testers that has smaller screen size it is opening a new link instead of the pop up

HTML:

<a class="popup-video" href="videos/onequote 1.mp4">
  <img src="images/thumb1.png">
</a>

SCRIPT:

$(function() {
                $('.popup-video').magnificPopup({
                    disableOn: 1000,
                    type: 'iframe',
                    mainClass: 'mfp-fade',
                    removalDelay: 160,
                    preloader: false,
                    fixedContentPos: false
                });
            });

Solution

  • The issue is happening because of the disableOn: 1000 setting in your Magnific Popup configuration. This setting means that when the screen width is smaller than 1000 pixels, the popup functionality is disabled. As a result, the tag behaves like a normal link, and it opens the video directly in a new tab instead of showing the popup. To fix this, you can either remove the disableOn option completely or set it to a smaller value like disableOn: 0. This way, the popup will work even on smaller screens. Here’s an example with the updated configuration

      $(function() {
        $('.popup-video').magnificPopup({
            disableOn: 0,
            type: 'iframe',
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
        });
    });
    

    This should solve the problem and make the popup work properly on all screen sizes. Hope this helps