Jump to content
Sign in to follow this  
WebEditorSmith

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

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...