Сделайте видео Vimeo Исчезать, когда он заканчивается, и Стоп на клике

Question

Я пытаюсь заставить Vimeo iframe 1) исчезать, когда видео заканчивается, и 2) исчезать и останавливаться, когда пользователь щелкает за рамкой.

Я видел несколько вопросов о первой проблеме, но API Vimeo слишком сложен для моего набора навыков без каких-либо конкретных указаний. Второй вопрос, который я не думаю, был специально задан.

Вот скрипка с моими существовавшими ранее jquery и html.

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

Answer 1

Вы пробовали их библиотеку API Froogaloop? https://developer.vimeo.com/player/js-api

Вы можете добавить события для на законченном player.addEvent('finish', onFinish);

и затем вызовите событие, удаляющее элемент, содержащий видео.

Для второй части я бы следовал этому посту Как я могу обнаружить щелчок за пределами элемента?

В этой ссылке есть множество методов, которые должны работать, чтобы определить, когда они щелкают за пределами видео. Тогда вам просто нужно удалить видео объект из DOM

Ура и удачи