Video Popup

Video Popup

To open a video in popup, you need to use below html to the link :

                    <a href="#" class="play video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/UXAJu3zS4bU" data-target="#ico-modal">Video Popup Link</a>

You can find video popup js code in theme.js file from here :

                    
                        crypto_ico/
                        ├── src/
                        |   ├── js/
                        |   |   ├── theme.js
                        
                    
                

Javascript code of video popup is here :

var $videoSrc;
$('.video-btn').click(function() {
    $videoSrc = $(this).data("src");
});

/* when the modal is opened autoplay it   */
$('#ico-modal').on('shown.bs.modal', function(e) {

    /* set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get */
    $("#video").attr('src', $videoSrc + "?rel=0&showinfo=0&modestbranding=1&autoplay=1");
})

/* stop playing the youtube video when I close the modal */
$('#ico-modal').on('hide.bs.modal', function(e) {
    /* a poor man's stop video */
    $("#video").attr('src', $videoSrc);
})
                

You can find modal video popup code here :

<div class="modal ico-modal fade" id="ico-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            <div class="modal-body p-0">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" id="video"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>