Magnific Popup

Light and responsive lightbox script with focus on performance.

Plugin Documentation

Usage

JS

copy

<script src="assets/libs/magnific-popup/jquery.magnific-popup.min.js"></script>

CSS

copy

<script src="assets/libs/magnific-popup/magnific-popup.css"></script>

Initialization

copy

<script>
    $(document).on('ready', function () {
        $('.story-video').magnificPopup({
            delegate: '.video',
            type: 'iframe'
        });
    });
</script>

Examples

...

Perfect solutions at your ideas

We run all kinds of services to manage business, build a site, and reach your goals with customized bootstrap components.

copy

<section class="jarallax overlay overlay-black overlay-75" data-jarallax data-speed="0.9" style="background-image: url(../html/assets/img/banner/cover-05.jpg);">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12">
                <div class="text-center story-video">
                    <a class="video video-btn video mb-6" href="../video/down-time.mp4">
                        <img class="feather text-white" src="../html/assets/img/svg/play.svg" alt="..." />
                    </a>
                    <h3 class="text-white mb-4">Perfect solutions at your ideas</h3>
                    <p class="lead w-md-50 m-auto text-white opacity9">We run all kinds of services to manage business, build a site, and reach your goals with customized bootstrap components.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
You can change the black overlay to primary overlay with replacing class overlay-black to overlay-primary and also you can change the overlay opacity as well with change class overlay-75.