CODEWITHSUNDEEP
videoiframevimeofeatherlight.jsvideo-gallery
ajbates
ajbates

Reputation: 11

Problems with featherlight.js

I'm making a video gallery with videos from Vimeo. The gallery has thumbnails, and the idea is that when clicked the video will open up in an iframe in a modal window.

I have downloaded the featherlight.js plugin for this, and it's kind of worked but I've got a few problems. Firstly, the video is tiny. And it doesn't look like a Vimeo video, it just looks very strange. I basically just want it to look like the iframe example on the featherlight homepage, can anyone tell me how to do this? Or does anyone know anywhere that has more detailed instructions on how to use this plugin?

jsfiddle: https://jsfiddle.net/ajbates/9dgr4nmc/

<div class="image-container">
          <div class="thumb">
            <a href="https://player.vimeo.com/video/162985476?autoplay=1&color=ffae00&byline=0&portrait=0" width="900" height="506" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen data-featherlight="iframe">
              <img src="img/butlins.png" alt="Bloc Festival">
              <div class="photo-overlay">
                <h3>Dancing On Carpets</h3>
                <p>Documentary Trailer</p>
              </div>
            </a>
            </div>
          </div>

Upvotes: 0

Views: 1842

Answers (1)

Igor
Igor

Reputation: 55

First you have the wrong link to show your video from vimeo, the right will be https://player.vimeo.com/video/162985476 where you will see all the buttons.

Second, apply through js or html with script tag:

$.featherlight({iframe: 'https://player.vimeo.com/video/162985476', iframeWidth: 500, 
iframeHeight: 300});

The second staff is to do it inside webpage (this is how it is done on main website of the script):

<a href="#" data-featherlight="#fl3">iFrame</a>
<iframe class="lightbox" src="https://player.vimeo.com/video/162985476" id="fl3" style="border:none;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" height="500px" width="900px"></iframe>

and CSS:

.lightbox {
display: none;

}

You can put also in ligthbox the width/height settings instead of html.

Upvotes: 1

Related Questions