temp.html

<h2>fancyBox v3.3 - Video</h2>

<p>
  Examples of displaying YouTube, Vimeo and HTML5 videos
</p>

<hr class="my-5" />

<div class="row mb-4">
  <div class="card-deck col-9">

    <div class="card">
      <a data-fancybox href="https://www.youtube.com/embed/_yPckk2ob4U">
        <img class="card-img-top img-fluid" src="http://img.youtube.com/vi/_sI_Ps7JSEk/mqdefault.jpg" />
      </a>
      <div class="card-body">
        <p class="card-text">Direct link to YouTube</p>
      </div>
    </div>

    <div class="card">
      <a data-fancybox data-width="640" data-height="360" href="https://www.youtube.com/watch?v=2mDPgVWG_Y8">
        <img class="card-img-top img-fluid" src="http://img.youtube.com/vi/2mDPgVWG_Y8/mqdefault.jpg" />
      </a>
      <div class="card-body">
        <p class="card-text">Custom video dimensions (aspect ratio is automatically calculated)</p>
      </div>
    </div>

    <div class="card">
      <a data-fancybox data-ratio="2" href="https://vimeo.com/191947042">
        <img class="card-img-top img-fluid" src="https://i.vimeocdn.com/video/604514162_640.jpg" />
      </a>

      <div class="card-body">
        <p class="card-text">Custom aspect ratio</p>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="card-deck col-9">
    <div class="card">
      <a data-fancybox data-small-btn="true" href="https://www.youtube.com/watch?v=rahRaVtEQaM">
        <img class="card-img-top img-fluid" src="http://img.youtube.com/vi/rahRaVtEQaM/mqdefault.jpg" />
      </a>

      <div class="card-body">
        <p class="card-text">Hide toolbar and display close button on top of the video</p>
      </div>
    </div>

    <div class="card">
      <a data-fancybox data-width="640" data-height="360" href="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4">
        <img class="card-img-top img-fluid" src="https://peach.blender.org/wp-content/uploads/bird1.jpg" />
      </a>

      <div class="card-body">
        <p class="card-text">Direct link to HTML5 video</p>
      </div>
    </div>

    <div class="card">
      <a data-fancybox href="#myVideo">
        <img class="card-img-top img-fluid" src="https://www.html5rocks.com/en/tutorials/video/basics/poster.png" />
      </a>

      <div class="card-body">
        <p class="card-text">HTML5 video from the page</p>
      </div>

      <video width="640" height="320" controls id="myVideo" style="display:none;">
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
        Your browser doesn't support HTML5 video tag.
      </video>


    </div>
  </div>
</div>