Запретить видео, которое находится внутри дисплея: ни один из загруженных

Question

Я создал два отдельных компонента для отображения некоторых видео в разном макете соответственно для настольного или портативного устройства.

Проблема была в скорости загрузки страницы, когда я проверил, что мои видео загружаются, хотя ничего не отображается.

Я использую bootstrap и jquery на странице, и использовал классы, предоставляемые BS, такие как d-none и d-lg-none.

Я также попытался удалить весь кусок кода, но видео с удаленными кодами все еще загружаются в HTML

<!--display on lg only-->
<div class="align-items-stretch d-none d-lg-flex highlight-content">
  <div class="col-8">
    <div class="ml-auto position-relative highlight-img-container h-100 show" id="sales_management_video">
      <div class="video-div video-border">
        <video autoplay muted class="highlight-video img-fluid" src="{{asset('img/landing/sales-management.mp4')}}"></video>
      </div>
    </div>
    <div class="ml-auto position-relative highlight-img-container h-100" id="case_management_video">
      <div class="video-div case-management1 mx-auto">
        <video autoplay muted class="highlight-video img-fluid case-management1" src="{{asset('img/landing/case-management-1.mp4')}}" ></video>
      </div>
      <div class="video-div case-management2 position-absolute">
        <video autoplay muted class="highlight-video img-fluid case-management2" src="{{asset('img/landing/case-management-2.mp4')}}"></video>
      </div>
    </div>
    <div class="ml-auto position-relative highlight-img-container h-100" id="inventory_optimization_video">
      <div class="video-div inventory-optimization">
        <video autoplay muted class="highlight-video img-fluid mx-auto" src="{{asset('img/landing/inventory-optimization-1.mp4')}}"></video>
      </div>
      <div class="video-div inventory-optimization mt-3">
        <video autoplay muted class="highlight-video img-fluid" src="{{asset('img/landing/inventory-optimization-2.mp4')}}" ></video>
      </div>
      <div class="video-div position-absolute inventory-optimization3">
        <video autoplay muted class="highlight-video inventory-optimization3 img-fluid" src="{{asset('img/landing/inventory-optimization-3.mp4')}}"></video>
      </div>
    </div>
  </div>
  <!--Highlight Toggle-->
  <div class="accordion d-flex flex-column highlight-content" id="highlight_tab">
    <div class="highlight-toggle-container highlight-sales-border bg-white">
      <div class="highlight-toggle" target="sales_management_video" id="crm_sales_management">
        <div data-toggle="collapse" data-target="#collapse_one" aria-expanded="true" aria-controls="collapse_one">
          <h3>SALES MANAGEMENT</h3>
        </div>
      </div>
      <div id="collapse_one" class="collapse show" aria-labelledby="crm_sales_management" data-parent="#highlight_tab">

      </div>
    </div>
    <div class="highlight-toggle-container highlight-case-border bg-white">
      <div class="highlight-toggle" target="case_management_video" id="crm_case_management">
        <div class="collapsed" data-toggle="collapse" data-target="#collapse_two" aria-expanded="false" aria-controls="collapse_two">
          <h3>CASE MANAGEMENT</h3>
        </div>
      </div>
      <div id="collapse_two" class="collapse" aria-labelledby="crm_case_management" data-parent="#highlight_tab">

      </div>
    </div>
    <div class="highlight-toggle-container highlight-optimize-border bg-white">
      <div class="highlight-toggle" target="inventory_optimization_video" id="crm_inventory_optimization">
        <div class="collapsed" data-toggle="collapse" data-target="#collapse_three" aria-expanded="false" aria-controls="collapse_three">
          <h3>INVENTORY OPTIMIZATION</h3>
        </div>
      </div>
      <div id="collapse_three" class="collapse" aria-labelledby="crm_inventory_optimization" data-parent="#highlight_tab">

      </div>
    </div>
  </div>
</div>
<!--display on sm and md-->
<div class="list-unstyled  d-block d-lg-none text-center highlight-portable">
  <div class="highlight-content">
    <h3>SALES MANAGEMENT</h3>
    <div class="video-border">
      <video autoplay muted class="highlight-video img-fluid" src="{{asset('img/landing/sales-management.mp4')}}"></video>
    </div>
  </div>
  <div class="highlight-content position-relative">
    <h3>CASE MANAGEMENT</h3>
    <div class="video-border case-management1 mx-auto">
      <video autoplay muted class="highlight-video img-fluid" src="{{asset('img/landing/case-management-1.mp4')}}" ></video>
    </div>
    <div class="video-border case-management2 position-absolute">
      <video autoplay muted class="highlight-video img-fluid" src="{{asset('img/landing/case-management-2.mp4')}}" ></video>
    </div>
    <img class="img-fluid position-absolute case-management3" src="{{asset('img/landing/case-management.png')}}" >

  </div>
  <div class="highlight-content position-relative">
    <h3>INVENTORY OPTIMIZATION</h3>
    <div class="video-border inventory-optimization">
      <video autoplay muted class="highlight-video img-fluid" src="{{asset('img/landing/inventory-optimization-1.mp4')}}"></video>
    </div>
    <div class="video-border inventory-optimization">
      <video autoplay muted class="highlight-video img-fluid" src="{{asset('img/landing/inventory-optimization-2.mp4')}}" ></video>
    </div>

    <div class="video-border position-absolute inventory-optimization3">
      <video autoplay muted class="highlight-video img-fluid" src="{{asset('img/landing/inventory-optimization-3.mp4')}}" ></video>
    </div>
  </div>
</div>
</div>

1010 * Javascript *

 if($(window).width() <= 992){

        $( ".d-lg-flex.highlight-content" ).remove();
    }
    else if ($(window).width() > 992){
        $( ".highlight-portable" ).remove();
    }

Как показано, страница отображается на экране рабочего стола

Если код был успешно удален, но содержимое все еще загружается в фоновом режиме.