如何将JavaScript图像灯箱更改为视频灯箱

Question

我想为YouTube画廊使用图片灯箱，如何更改JavaScript代码以支持视频？

我只有JavaScript的基本知识。

HTML代码：

inside img

img data-order="2" data-lightbox-image="123big.jpg" src="123.jpg" alt="Image"

JavaScript代码：

/ *灯箱* /

var series_first_click = true;
var series_data_order = 0;
var max_image_width = 0;
var max_image_height = 0;

function kuist_get_miw() {
    if ( $( window ).width() > 640 ) {
        max_image_width = $( window ).width() - 200;
    } else {
        max_image_width = $( window ).width();
    }
    return max_image_width;
}

function kuist_get_mih() {
    if ( $( window ).width() > 640 ) {
        max_image_height = $( window ).height() - 100;
    } else {
        max_image_height = $( window ).height();
    }
    return max_image_height;
}

var kuist_lightbox_lazy = false;
var kuist_lightbox_preload = true;
var kuist_lightbox_datasrc = '';
var kuist_lightbox_imgclass = 'kuist-swiper-default';
var kuist_lightbox_preloader = '';
var kuist_lightbox_image_cap = '';

if ( $( '#swiper_lazy_check' ).text() == 0 ) { kuist_lightbox_lazy = false; } else { kuist_lightbox_lazy = true; }

if ( kuist_lightbox_lazy ) {
    kuist_lightbox_preload = false;
    kuist_lightbox_datasrc = 'data-';
    kuist_lightbox_imgclass = 'swiper-lazy';
    kuist_lightbox_preloader = '<div class="swiper-lazy-preloader"></div>';
}

var kuist_lightbox_swiper = new Swiper( '.kuist-lightbox-swiper', {
    roundLengths: true,
    centeredSlides: true,
    preloadImages: kuist_lightbox_preload,
    lazy: kuist_lightbox_lazy,
} );

kuist_lightbox_swiper.on( 'slideChange', function() {
    if ( !series_first_click ) {
        kuist_lightbox_check_navigation();
        if ( !kuist_lightbox_lazy ) { kuist_set_lightbox_all_images_pos(); }
    }
} );

kuist_lightbox_swiper.on( 'lazyImageReady', function() {
    kuist_set_lightbox_active_image_pos( kuist_get_miw, kuist_get_mih, $( '.kuist-lightbox-swiper .swiper-slide-active img.swiper-lazy-loaded' ) );
} );

function kuist_lightbox_check_first_navigation() {
    $( '.kuist-lightbox-prev, .kuist-lightbox-next' ).hide();
    if ( kuist_lightbox_swiper.activeIndex != 0 ) {
        $( '.kuist-lightbox-prev' ).show();
    }
    if ( kuist_lightbox_swiper.activeIndex != $( '.kuist-lightbox-swiper' ).find( '.swiper-slide ' ).length - 1 ) {
        $( '.kuist-lightbox-next' ).show();
    }
}

function kuist_lightbox_check_navigation() {
    if ( kuist_lightbox_swiper.activeIndex == 0 ) {
        kuist_lightbox_prev_btn_closing();
    } else {
        $( '.kuist-lightbox-prev' ).show();
        $( '.kuist-lightbox-prev' ).text( kuist_lightbox_swiper.activeIndex );
    }
    if ( kuist_lightbox_swiper.activeIndex == $( '.kuist-lightbox-swiper' ).find( '.swiper-slide ' ).length - 1 ) {
        kuist_lightbox_next_btn_closing();
    } else {
        $( '.kuist-lightbox-next' ).show();
        $( '.kuist-lightbox-next' ).text( kuist_lightbox_swiper.activeIndex + 2 );
    }
    series_first_click = false;
}

function kuist_set_lightbox_all_images_pos() {
    $( '.kuist-lightbox-swiper .swiper-slide img' ).each( function() {
        kuist_set_lightbox_active_image_pos( kuist_get_miw, kuist_get_mih, this );
    } );
}

function kuist_set_lightbox_active_image_pos( miw, mih, obj ) {
    if ( $( window ).height() <= mih ) {
        $( obj ).css( { 'width': 'auto', 'height': $( window ).height() } );
    } else {
        $( obj ).css( { 'width': 'auto', 'height': 'auto' } );
    }
    $( obj ).css( { 'max-width': miw, 'max-height': mih } );
    $( obj ).css( { 'top': $( window ).height()/2 - $( obj ).height()/2, 'left': $( window ).width()/2 - $( obj ).width()/2 } );
    if ( kuist_lightbox_lazy ) {
        $( '.swiper-lazy-preloader' ).css( { 'top': $( window ).height()/2, 'left': $( window ).width()/2 } );
    }
}

function kuist_set_lightbox_active_image_pos_wo_lazy() {
    $( '.kuist-lightbox-swiper .swiper-slide-active img' ).one( 'load', function() {
        kuist_set_lightbox_active_image_pos( kuist_get_miw, kuist_get_mih, this );
    }).each( function() {
        if ( this.complete ) { $( this ).load(); }
    });
}

我想将此代码用于YouTube视频，并且应该在iframe中显示。 有很多视频灯箱可用，但我需要这样做，因为我需要使用此灯箱进行动画处理。