I have a video module that uses a splash screen and on click, reveals a full screen video for screen sizes 667 +. I would like to have this reverse it's animation after ending the video so it returns to the splash screen. I'm not really sure where to even start or whether this is possible. Any help is appreciated!

    $(function(){

    var $parent = $('.video-hero'),
            $video = $parent.find('iframe'),
            $playButton = $(".play"),
            $itemsToFadeOut = $(".vid-cap, .ghost"),
            f = $video[0],
            url = $video.attr('src').split('?')[0],
            activeVideoClass = "video-started";

            // setup fitVids
            $parent.fitVids();

            // handle play click
            $playButton.click(function(e){

                e.preventDefault();

                // grab height of video
                var videoHeight = $video.height();

                // add class to hero when video is triggered
                $parent.addClass(activeVideoClass);

                // fade out the play button
                $(this).fadeOut("fast");

                // fade out poster image, overlay, and heading
                $itemsToFadeOut.fadeOut();

                // toggle accessibility features
                $video.attr({
                    "aria-hidden" : "false",
                    "tabindex" : "0"
                });

                // set focus to video for accessibility control
                $video.focus();

                // set height of hero based on height of video
                $parent.css("max-height",videoHeight).height(videoHeight);

                // send play mand to Vimeo api
                runCommand('play');

            });

            // send play to vimeo api
            var runCommand = function(cmd){
                var data = {method : cmd};
                f.contentWindow.postMessage(JSON.stringify(data), url);
            }

            // handle resize
            $(window).resize(function(){
                var videoHeight = $video.height();
                if($(".video-started").size() === 1){
                    $parent.height(videoHeight);
                }
            });

});

Remember to resize my JSFiddle so you're able to see the animation I am talking about.

I have a video module that uses a splash screen and on click, reveals a full screen video for screen sizes 667 +. I would like to have this reverse it's animation after ending the video so it returns to the splash screen. I'm not really sure where to even start or whether this is possible. Any help is appreciated!

    $(function(){

    var $parent = $('.video-hero'),
            $video = $parent.find('iframe'),
            $playButton = $(".play"),
            $itemsToFadeOut = $(".vid-cap, .ghost"),
            f = $video[0],
            url = $video.attr('src').split('?')[0],
            activeVideoClass = "video-started";

            // setup fitVids
            $parent.fitVids();

            // handle play click
            $playButton.click(function(e){

                e.preventDefault();

                // grab height of video
                var videoHeight = $video.height();

                // add class to hero when video is triggered
                $parent.addClass(activeVideoClass);

                // fade out the play button
                $(this).fadeOut("fast");

                // fade out poster image, overlay, and heading
                $itemsToFadeOut.fadeOut();

                // toggle accessibility features
                $video.attr({
                    "aria-hidden" : "false",
                    "tabindex" : "0"
                });

                // set focus to video for accessibility control
                $video.focus();

                // set height of hero based on height of video
                $parent.css("max-height",videoHeight).height(videoHeight);

                // send play mand to Vimeo api
                runCommand('play');

            });

            // send play to vimeo api
            var runCommand = function(cmd){
                var data = {method : cmd};
                f.contentWindow.postMessage(JSON.stringify(data), url);
            }

            // handle resize
            $(window).resize(function(){
                var videoHeight = $video.height();
                if($(".video-started").size() === 1){
                    $parent.height(videoHeight);
                }
            });

});

Remember to resize my JSFiddle so you're able to see the animation I am talking about.

• javascript
• jquery
• css

• check this developer.vimeo./player/js-api – maioman Commented Jul 27, 2015 at 13:17
• The full screen is not displaying in Firefox Browser. – Sabyasachi Mishra Commented Jul 27, 2015 at 13:24
• @SabyasachiMishra it is being blocked in FF from JSFiddle, but our website's domain plays it fine, thanks for the heads up! – knocked loose Commented Jul 27, 2015 at 13:30
• @maioman, i've looked through there and I still can't get it to recognize the video ending? – knocked loose Commented Jul 27, 2015 at 13:43
• @user4875251, ahem, find addEventListener on that page and below is a table listing the events including finish, which appears to be what you need. – woxxom Commented Jul 27, 2015 at 13:48

2 Answers 2

Figured it out everyone! I'll explain each chunk of code step by step for anyone's future reference.

I was able to acplish what I needed to do without the froogaloop cdn, and just using fitvids.js here is a working fiddle of my solutions.

I listed all of my JS below in sections, but for the answer to my question of "reversing my function after video finishes" you will only need to pay attention to my Event Handlers, Connection to the API, and Player State Functions. Once I was able to make the connection and read that the video was ended, I used addClass(); and removeClass(); coupled with CSS Transitions to handle swapping between my play and ready(post finish) states.

I tried to document and explain as much as I could so hopefully this can help someone in the future!

Naming my Vars

Not much to mention here, this is just the preliminary, the main thing to pay attention to is var url it's the only way I could write it to allow me to use my listeners with the Vimeo api.

var parent = $('.video-hero'), 
                 f = $('iframe'),
                 $playButton = $(".play"),
                 $itemsToFadeOut = $(".vid-cap, .ghost, .play"),
                 $video = f[0],
                 url = f.attr('src').split('?')[0],
                 activeVideoClass = "video-started", //Class for when video is playing
           standardClass = "standard"; //Class for when video is finished/before play

Event Listeners / Handlers

My listeners just wait to receive a message from the api/player of whether the video is ready, paused, finished or playing.

listeners

// Listen for messages from the player
if (window.addEventListener){
    window.addEventListener('message', onMessageReceived, false);
}
else {
    window.attachEvent('onmessage', onMessageReceived, false);
}

My handlers well... handle when my functions are fired. My functions are located below, this just lets me choose which state (case) I have being sent from the API and how to react to it.

handlers

// Handle messages received from the player
function onMessageReceived(e) {
    var data = JSON.parse(e.data);

    switch (data.event) {
        //Ready case is before play / after finish
            case 'ready':
            onReady();
            break;

        case 'pause':
            onPause();
            break;

        case 'finish':
            onFinish();
            break;
    }
}

Connecting to the Vimeo API

This section municates hand in hand with my html play button and vimeo's api/player, allowing me to run, pause and stop the video

// send play to vimeo api
            var runCommand = function(cmd){
                var data = {method : cmd};
                f[0].contentWindow.postMessage(JSON.stringify(data), url);
            }


// Helper function for sending a message to the player
function post(action, value) {
    var data = { method: action };

    if (value) {
        data.value = value;
    }

    f[0].contentWindow.postMessage(JSON.stringify(data), url);
}

Player State Functions

What will happen based on which state or case the player is in

function onReady() {
    post('addEventListener', 'finish');

}

  function onPause() {
    console.log('paused');
}

function onFinish() {
  // add class to hero when video is triggered
                parent.removeClass(activeVideoClass);
parent.addClass(standardClass);
                // fade out the play button
                $(this).fadeIn("slow");
                // fade out poster image, overlay, and heading
                $itemsToFadeOut.fadeIn();

}

To detect the end of the video, and run JS code, you might need to make use of the Froogaloop library:

https://developer.vimeo./player/js-api#universal-with-froogaloop

You can then do something like:

var player = $f(iframe[0]);

player.addEvent('ready', function() {
    player.addEvent('finish', function() {
        // Animation...
    });
});

The different events are here: https://developer.vimeo./player/js-api#events

I do this on a site I built recently in order to close the modal window on video end / finish: http://billy.fm/

Feel free to examine the JS code there (unminified version): http://billy.fm/wp-content/themes/billy/js/main.js

Wish I had more time to help you, but this should set you off on the right track.