防止显示中的视频内容：无下载

Question

我创建了两个单独的组件，以根据台式机或便携式设备显示具有不同布局的某些视频。

问题出在页面加载速度上，即使没有显示任何内容，我也检查过我是否意识到正在加载我的视频。

我在页面上使用引导程序和jquery，并使用了BS提供的类，例如d-none和d-lg-none。

我也尝试过删除全部代码，但是删除的代码的视频仍在加载中 HTML

Montalban/Marikina

JavaScript

<!--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>

如图所示，该页面显示在桌面屏幕上

已成功删除代码但内容仍在后台加载的地方。