Sistema de Lightbox para vídeos

lightbox-template.php

<?php
//wp_is_ipad vai em functions.php
function wp_is_ipad ( ) {
	if( strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') ) {
		return true;
	} else{
		return false;
	}
}

if ( wp_is_ipad() ) {

	$user_agent_class = "LightboxVideo--tablet";

}else if (wp_is_mobile()) {

	$user_agent_class = "LightboxVideo--mobile";
	
}else{

	$user_agent_class = "LightboxVideo--desktop";

}


?>

<div class="LightboxVideo <?php echo $user_agent_class; ?> is-animating u-borderRadius5 u-overflowHidden"></div>

sistema_lightbox.js

// ============
//  SISTEMA DE LIGHTBOX PARA VÍDEOS
//=============

//ABRIR LIGHTBOX DE VÍDEO
// DESKTOP - height: 515px; width: 815px;
// TABLET - height: 485px; width: 615px;
// MOBILE - height: 315px; width: 305px;
function OpenVideoLightBox (content) {

    closebutton = '<a class="VideoCloseButton is-animating" href="javascript:CloseVideoLightBox();">FECHAR</a>';
    // ESTABELECENDO DIMENSÕES DO LIGHTBOX, LEVANDO EM CONTA O DISPOSITIVO
    if ($(".LightboxVideo").hasClass("LightboxVideo--mobile")) {

        $(".LightboxVideo").css("height", "315px");
        $(".LightboxVideo").css("width", "305px");

    }else if ($(".LightboxVideo").hasClass("LightboxVideo--tablet")) {

        $(".LightboxVideo").css("height", "485px");
        $(".LightboxVideo").css("width", "615px");

    }else{

        $(".LightboxVideo").css("height", "515px");
        $(".LightboxVideo").css("width", "815px");

    }

    // APLICANDO MÁSCARA ESCURA AO REDOR DO SITE
    $(".BlackMask").css("display", "block");

    // IMPRIMINDO IFRAME NA TELA
    $(".LightboxVideo").html(content + closebutton);

    //IMPEDINDO SCROLL DO USUÁRIO
    $("body").css("overflow", "hidden");

    /* APLICANDO TRANSPARENCIA NA DIV DE EXIBIÇÃO DO LIGHTBOX,
    EVITANDO ASSIM, QUE FIQUEM BORDAS BRANCAS AO REDOR DO IFRAME. */
    $(".LightboxVideo").css("background", "transparent");
}

//FECHAR LIGHTBOX DE VÍDEO
function CloseVideoLightBox () {

    //REVERTENDO TODOS OS PROCESSOS DE ABERTURA DO LIGHTBOX
    $(".LightboxVideo").css("background", "#fff");
    $(".LightboxVideo").css("height", "0");
    $(".LightboxVideo").css("width", "0");
    $(".BlackMask").css("display", "none");
    $(".LightboxVideo").html("");
    $("body").css("overflow", "initial");

}

//AÇÃO DISPARADA AO CLICAR O BOTÃO
function VideoLightBox ( embed ) {
    
    /* ARMAZENANDO IFRAME NA VARIÁVEL CONTENT, 
    ENVIANDO PARA AÇÃO DE ABERTURA DO LIGHTBOX */
    $content = "<iframe width='100%' height='100%' src='"+ embed +"' frameborder='0' allowfullscreen allow='autoplay'></iframe>";
    
    OpenVideoLightBox($content);
}

// EVENTO DE FECHAMENTO DO LIGHTBOX AO CLICAR NA MÁSCARA ESCURA
$(".BlackMask").click(function(){
    CloseVideoLightBox();
});


// ============
//  FIM DO SISTEMA DE LIGHTBOX PARA VÍDEOS
//=============

template.php

<?php
    //Colhendo post do vídeo
    $args = [
        "post_type" => "videos",
        "posts_per_page" => 1,
        //Filtrando post pela slug "como-funciona"
        "meta_query" => array(
            "key" => "slug",
            "value" => "como-funciona",
            "compare" => "IN"
        ),
    ];

    $video = new WP_Query( $args );

    //Filtrando link do vídeo
    if ( $video->have_posts() ) {
        while ( $video->have_posts() ) { $video->the_post();
            $youtube = get_the_content();
            $videoCode = preg_split("/=/", $youtube);
            $linkEmbed = strpos($youtube, "youtube") !== false ? "https://www.youtube.com/embed/".$videoCode[1]."?autoplay=1&rel=0" : "https://www.youtube.com/embed/?autoplay=1&rel=0";
            $capa = has_post_thumbnail() ? get_the_post_thumbnail_url( $post->ID, get_thumbnail_size() ) : get_template_directory_uri() . "/assets/images/guta-video-persona.png";
        }
        $lightbox = "javascript:VideoLightBox('". $linkEmbed ."');";
?>
<section class="subSection subSection--video u-positionRelative">
    <figure class="subSection-figure u-positionAbsolute u-sizeFull u-heightFull">
        <img class="u-sizeFull u-heightFull u-objectFitCover" src="<?=$capa?>" alt="Maria Augusta explicando a personalização de produtos da We Art."> 
    </figure>
    <a href="<?=$lightbox?>" class="Play u-positionAbsolute u-zIndex10">
        <div class="Play-container u-positionRelative">
            <svg class="u-icon icon-play3"><use xlink:href="#icon-play3"></use></svg>
        </div>
    </a>

</section>

<?php } wp_reset_postdata(); ?>