loading mediaelementjs in an inline colorbox, pause video onClose

Question

tried a few things and can't get this working. I have an inline video element that I'm loading into a colorbox, then applying mediaelementjs to it. I'm firing mediaelement on the colorbox onOpen event.

Problem is that the movie keeps playing when I close colorbox. I can't access that player outside the success function, like in onCleanup or onClose.

Here's the html where the video sits:

<div class="hidden">
    <div id="trailer-wrap">
        <video id="trailer" src="...video source..." type="video/mp4" controls="controls" width="720" height="480" preload="none">

            <object width="720" height="405" type="application/x-shockwave-flash" data="path/to/flashmediaelement.swf">
                <param name="movie" value="path/to/flashmediaelement.swf" />
                <param name="flashvars" value="controls=true&amp;file=...video source..." />
                <img src="poster.jpg" alt="No video playback capabilities" />
            </object>
        </video>    
    </div>
</div>

and here's the script below it:

    $(".cbox-trigger").colorbox({
        inline:true, 
        innerWidth:"720px",
        innerHeight:"480px",
            scrolling:false,
            onOpen: function(){

                var player = new MediaElementPlayer('#trailer', {
                    success: function (mediaElement, domObject) {
                        // call the play method
                        mediaElement.play();
                    }
                });
                $.fn.colorbox.resize();
            },
            onCleanup: function(){
                [how to access player object here?].pause();
            }
        });

Answer 1

For this, you may need to define player variable outside of colorbox block, then use this variable in the onCleanup callback

var player = null;
$(".cbox-trigger").colorbox({
    inline:true, 
    innerWidth:"720px",
    innerHeight:"480px",
        scrolling:false,
        onOpen: function(){

            player = new MediaElementPlayer('#trailer', {
                success: function (mediaElement, domObject) {
                    // call the play method
                    mediaElement.play();
                }
            });
            $.fn.colorbox.resize();
        },
        onCleanup: function(){
            player.pause();
        }
    });