Jump to content

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


WebEditorSmith
 Share

Recommended Posts

     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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...