Can I make sure that fancybox.js doesn't work before loading?

I'm a beginner in coding, and I'm using a translator to ask questions. I ask for your generous understanding.

I'm using fancybox version 3.5.7.

I using "jquery.fancybox.min.js" to make YouTube come out.

However, if there is a problem with the speed at which JS is called, click before js is loaded to go to the YouTube site.

To solve this problem, I put the js code in the header.php file as script. There are fewer problems than before, but problems are occurring intermittently.

Is there a way not to go to the YouTube site even if i click it before the fancybox js is loaded?

Thank you. Please give me a hint or tip that I can try.

It's a code that was made.

function.php

add_action( "wp_enqueue_scripts", "include_custom_style" );
function include_custom_style(){
  wp_enqueue_style( "fancybox-css", get_stylesheet_directory_uri() . "/css/jquery.fancybox.min.css");
  wp_enqueue_script( "fancybox-js", get_stylesheet_directory_uri() . "/js/jquery.fancybox.min.js");

blog-list.php

function blackvue_blog_list() {
  global $content;
   ob_start();
  $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
  $args = array(
     'post_type'      => 'post',
     'paged'          => $paged,
     'post_status'    => 'publish',
     'order'          => 'DESC'
  );
  $loop = new WP_Query( $args );
  ?>
  <div class="elementor-posts blog-archive">
  <?php
  if ( $loop->have_posts() ) {
    while ( $loop->have_posts() ) : $loop->the_post();
    $postID =  get_the_ID();
    $content = get_the_content();
    $videourl = get_the_post_video_url( $postID );
    $video_id = explode("?v=", $videourl);
    $video_id = $video_id[1];
    $imgyoutube = 'http://img.youtube.com/vi/'.$video_id.'/0.jpg'; 
    $thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
  ?>
  <div class="news-post elementor-post elementor-grid-item">
    <div class="elementor-post__thumbnail__link" style="background-image: url(<?php echo $thumb[0];?>);">
        <?php if(!empty($videourl)){
      echo '<a data-fancybox href="'.$videourl.'">
        <img alt="'.get_the_title().'" src="'.$thumb[0].'" class="elementor-post__thumbnail"/>
        <div class="vdo">
          <i class="fa fa-youtube-play" aria-hidden="true"></i>
        </div>
      </a>';
    }elseif(has_post_thumbnail()){
        $permlink = get_the_permalink();
      echo '<a href="'.$permlink.'"><img alt="'.get_the_title().'" src="'.$thumb[0].'" class="elementor-post__thumbnail"/></a>';
    }
    else{
    }?>
    </div>

The simplest solution would be to change href="URL" attribute to data-src="URL"