0

I'm trying to get a Vimeo iframe to 1) disappear when the video ends, and 2) disappear and stop when the user clicks outside the frame.

I've seen a few questions about the first issue, but the Vimeo API is too complicated for my skillset without some specific guidance. The second issue I don't think has been specifically asked.

Here's a fiddle with my preexisting jquery and html stuff.

/*HTML*/

    <div class="main_image">
    <div id="video"></div>

 <a href="#" id="showVideo">
    <img src="http://static.ddmcdn.com/gif/11-billion-people.jpg">
        <div class="playbutton">
                <img class="image" src="http://www.onyxga.com/images/Play-Button.png">
                <img class="image hover" src="http://www.clipartbest.com/cliparts/M9c/pjy/M9cpjydTE.png">
        </div>
        <div id="title">Video Title</div>
 </a>

</div>


/*script*/

$('#showVideo').click(function() {
    $('#video').show().html('<iframe src="http://player.vimeo.com/video/122447979?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
});

   $(".main_image").mouseenter(function()
   {
       $(".playbutton").fadeIn(100);                    
   });

   $(".main_image").mouseleave(function()
   {
       $(".playbutton").fadeOut(100);                    
   });
user2985093
  • 63
  • 1
  • 2
  • 13
  • This won't work with out the vimeo api. You could attempt to use setTimeout for the 1st part of your question, but that is a BAD idea. For the 2nd part: 1) You could add an overlay and update URL (I believe Vimeo has auto-play URL parameters) when it is clicked and give it focus 2) When it loses focus change the iframe src again. But the best way is to use their API! – colecmc Apr 15 '15 at 17:58

1 Answers1

1

Have you tried their Froogaloop api library? https://developer.vimeo.com/player/js-api

You can add events for on finished player.addEvent('finish', onFinish);

and then have that fire an event that deletes the element that contains the video.

For the second part I would follow this post How do I detect a click outside an element?

There are a variety of methods in that link that should work for detecting when they click outside of the video. Then you just have to delete the video object from the DOM

Cheers and good luck

Community
  • 1
  • 1
humanbeing
  • 1,617
  • 3
  • 17
  • 30
  • Trying just to get the video to close on finish. Took a look through the API and some related discussions on here, but I'm doing something wrong... https://jsfiddle.net/cdo2roqe/1/ – user2985093 Apr 18 '15 at 02:38