search

stevewithington / MuraPlayer

This is a Mura CMS plugin that wraps the JW Player TM (v5) for Flash and HTML5.
Apache License 2.0
1 stars 4 forks source link

[Feature - Request] Make plugin responsive? #10

Open sebgmc opened 10 years ago

sebgmc commented 10 years ago

Please add the possibility to make the player container 100% in width. This discussion has been going on over at JW Player forums. A fix is coming or has already been released. In a day where all website designs are responsive, the player window remains rigid and breaks designs, which is bad. Here's a nice example that could be added to the Mura Web Player: http://webdesignerwall.com/tutorials/css-elastic-videos

sebgmc commented 10 years ago

OK, I seem to have figured it out how to make this all work responsively with the current version of the plugin (the inline styles are created by the plugin based on the ratio-settings (width/height) for the videoplayer in the content of a page in Mura where the plugin is being used):

HTML: <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">

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