Help inserting video embed links into "carousel" of rotating photos

[WebEditorSmith]

     Hello, I have this carousel that rotates with still images, my goal is to embed a video link with a still image preview overtop of it, so when they click the image they can watch the embedded video right where the image is, and from there go to the video functions, full screen etc...

Can someone please advise if I need to consider an iframe that pops up overtop upon clicking or if it is 'doable' right there in the image sized frame. 

I am more of an editor, definitely not a code aficionado, so please bare with me and help guide me to my solution, thanks in advance for all of your help!

 

code:

<div class="owl-carousel carousel-project" data-items="1" data-md-items="1" data-dots="true" data-nav="true" data-stage-padding="15" data-md-stage-padding="150" data-xl-stage-padding="200" data-xxl-stage-padding="350" data-loop="true" data-autoplay="true" data-center="true" data-margin="30" data-xl-margin="0" data-xxl-margin="0" data-mouse-drag="false" data-nav-text="[&quot;prev&quot;, &quot;next&quot;]">
          <div class="box-project">
            <div class="box-project-image"><img src="images//project-1-632x375.jpg" alt="" width="632" height="375"/>
            </div>
            <div class="box-project-body">
              <div class="box-project-inner">
                <h5 class="box-project-title"><a href="#">Jane Williams</a></h5>
                <div class="box-project-subtitle">music videography</div>
              </div>
              <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span>
                <ul class="list-inline-sm box-project-icon-list">
                  <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="box-project">
            <div class="box-project-image"><img src="images//project-2-632x375.jpg" alt="" width="632" height="375"/>
            </div>
            <div class="box-project-body">
              <div class="box-project-inner">
                <h5 class="box-project-title"><a href="#">Type One Ltd.</a></h5>
                <div class="box-project-subtitle">commercial Videography</div>
              </div>
              <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span>
                <ul class="list-inline-sm box-project-icon-list">
                  <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="box-project">
            <div class="box-project-image"><img src="images//project-3-632x375.jpg" alt="" width="632" height="375"/>
            </div>
            <div class="box-project-body">
              <div class="box-project-inner">
                <h5 class="box-project-title"><a href="#">Agnivex Studio</a></h5>
                <div class="box-project-subtitle">Fine art photography</div>
              </div>
              <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span>
                <ul class="list-inline-sm box-project-icon-list">
                  <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li>
                  <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>