CODEWITHSUNDEEP
javascriptjqueryhtmlvimeofroogaloop
user2985093
user2985093

Reputation: 63

Make Vimeo video Disappear when it ends, and Stop on click

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);                    
   });

Upvotes: 0

Views: 1560

Answers (1)

humanbeing
humanbeing

Reputation: 1697

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

Upvotes: 1

Related Questions