Magic Zoom Plus gallery combined with YouTube and Vimeo videos

magiczoomplus-video-gallery.html

<div class="zoom-gallery">
    <div data-slide-id="zoom" class="zoom-gallery-slide active">
        <a href="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg" class="MagicZoom" id="zoom-v">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg?scale.width=400"/>
        </a>
    </div>
    <div data-slide-id="video-1" class="zoom-gallery-slide video-slide">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/J91IcJE6Clg" frameborder="0" allowfullscreen></iframe>
    </div>
    <div data-slide-id="video-2" class="zoom-gallery-slide video-slide">
        <iframe src="https://player.vimeo.com/video/134250658?byline=0&amp;portrait=0" width="475" height="267" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="selectors">
        <a data-slide-id="zoom" class="active" href="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg" data-image="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg?scale.width=400" data-zoom-id="zoom-v">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg?scale.width=75"/>
        </a>
        <a data-slide-id="zoom" href="https://magictoolbox.sirv.com/images/magiczoomplus/nike-02.jpg" data-image="https://magictoolbox.sirv.com/images/magiczoomplus/nike-02.jpg?scale.width=400" data-zoom-id="zoom-v">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/nike-02.jpg?scale.width=75"/>
        </a>
        <a data-slide-id="zoom" href="https://magictoolbox.sirv.com/images/magiczoomplus/nike-03.jpg" data-image="https://magictoolbox.sirv.com/images/magiczoomplus/nike-03.jpg?scale.width=400" data-zoom-id="zoom-v">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/nike-03.jpg?scale.width=75"/>
        </a>
        <a data-slide-id="video-1" href="#">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/youtube.png?canvas.width=75&amp;canvas.height=75&amp;scale.width=65"/>
        </a>
        <a data-slide-id="video-2" href="#">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/vimeo.png?canvas.width=75&amp;canvas.height=75&amp;scale.width=65"/>
        </a>
    </div>
</div>

<script>
    $('.zoom-gallery .selectors a').click(function(e) {
        $('.zoom-gallery .zoom-gallery-slide').removeClass('active');
        $('.zoom-gallery .selectors a').removeClass('active');
        $('.zoom-gallery .zoom-gallery-slide[data-slide-id="'+$(this).attr('data-slide-id')+'"]').addClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
</script>

<style type="text/css">
    .zoom-gallery { 
        text-align: center; 
    }
    .zoom-gallery-slide { 
        display: none; 
    }
    .zoom-gallery-slide.active { 
        display: block; 
    }
    .zoom-gallery .video-slide {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
    }
    .zoom-gallery .video-slide iframe, 
    .zoom-gallery .video-slide object,
    .zoom-gallery .video-slide embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    .zoom-gallery .selectors { 
        text-align: center; 
        margin:10px 0; 
    }
    .zoom-gallery .selectors a { 
        margin:5px; 
        border:1px solid transparent; 
        display: inline-block; 
    }
    .zoom-gallery .selectors a:hover,
    .zoom-gallery .selectors a.active { 
        border-color: #ccc; 
    }
    .zoom-gallery .selectors img { 
        box-shadow: none !important; 
        filter:none !important; 
        -webkit-filter: none !important;
    }
</style>