IE7 IE8 – Fancybox + MediaElement.js

I had some difficulties getting videos playing in a Fancybox using MediaElement.js. It has been working everywhere but IE7/IE8.

what does not work for me

First I attached fancybox() and mediaelementplayer() to html tags separately as following:

$('.open-fancybox').fancybox();
$('#mediaelement').mediaelementplayer();
<a class="open-fancybox" href="#fancybox">
<div id="fancybox">
    <video id="mediaelement" src="...mp4">
</div>

That did not work in IE versions below IE9. The fancybox opened, but the video did not show up. So I tried attaching the mediaelementplayer() after the fancybox was loaded.

This solution works for me! (UPDATED)

var player;
$('.open-fancybox').fancybox({
    'afterShow' : function() {
        player = new MediaElementPlayer('#mediaelement', { options });
    },
    'afterClose' : function() {
        player.pause();
    }
});
<a class="open-fancybox" href="#fancybox">
<div id="fancybox">
    <video id="mediaelement" src="...mp4">
</div>

UPDATE: Many thanks to Horst who found out, that Firefox an IE continue playing the movie after closing the fancybox. I updated the code to solve this.

I think that mediaelement.js actually is the best solution for cross-browser and cross-platform video hosting!

Über den Autor:

Dies ist nur ein Gravatar

Markus Hammerschmid - Xing | Twitter | Linkedin

Ich bin Webentwickler, SEO-, SEM und Social Media Ergebener und ambitionierter Prozessoptimierer. Hab Spaß am Bloggen und Twittern und freue mich auf jedes Feedback! Aktuell - Betreiber eines Onlineshops Circlepit Vinyl Records für Heavy Metal Schallplatten


Info