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="" data-target="#ico-modal">Video Popup Link</a>

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

                        ├── 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('', 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('', 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>
            <div class="modal-body p-0">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" id="video"></iframe>