Mura CMS: The Mura Web Player and responsive design

OK, this one took me some time in the wee hours of the night to figure out: how to embed the Mura Web Player into a responsive website design. After having fiddled around with this myself for some time via normal CSS and looked in the JW Player forums for similar threads (and finding some partial solutions, but mostly for version 6.x of JW Player - Mura Web Player is still on version 5 for a number of reasons), I came upon an older blogpost over at Web Designer Wall: CSS - Elastic video. That seemed very promising, even the demo is smashing, but somehow it didn't go well with the inline styles the Mura Web Player created when displaying the video in a page. So I then started singling out each CSS-rule in the Elastic video article to find the sweetspot / breaking point. It ended up being a bit of both:


<div class="muraPlayerOuterWrapper">
<div id="player_79ee12d3659049a0b218d27da3b6b17d_wrapper" style="position: relative; width: 640px; height: 360px;">
<object id="player_79ee12d3659049a0b218d27da3b6b17d" width="100%" height="100%" type="application/x-shockwave-flash" data="/plugins/MuraPlayer/assets/players/jwplayer/player.swf" bgcolor="#000000" name="player_79ee12d3659049a0b218d27da3b6b17d" tabindex="0">


.muraPlayerOuterWrapper div { width:100% ! important; }
.muraPlayerOuterWrapper div iframe, .muraPlayerOuterWrapper div object, .muraPlayerOuterWrapper div embed { position:absolute; top:0; left:0; }

The trick was to add the width:100% to the inner div and removing all other extra CSS from the Elastic video example CSS. So now I have an elastic Mura Web Player video in my Mura CMS webpages ;-)

Thanx 2 Steve Withington for creating the Mura Web Player (a JW Player wrapper) for Mura CMS.

Geplaatst op 03 september 2014 om 01:02 u.

Alles in 'Ontwikkeling'

9 bericht(en)