WordPress.org

Ready to get started?Download WordPress

Forums

MediaElement.js - HTML5 Video & Audio Player
Make Mediaelement Responsive please (2 posts)

  1. elainemarley
    Member
    Posted 1 year ago #

    I have read a lot on this plugin and I've only found solutions for the standalone version of the script. It seems like the wordpress version is a few updates behind.

    What I've tried so far is to replicate what is working on the normal version of this plugin, by changing this line in mediaelement-js-wp.php:

    <{$tagName} width="{$width}" height="{$height}" style="width:100%; height:100%;" id="wp_mep_{$mediaElementPlayerIndex}" controls="controls" {$attributes_string} class="mejs-player {$skin_class}" data-mejsoptions='{$options_string}'>

    But that only makes my video player to look tiny. I also changed the js version to the latest one on github but that didn't help either.

    http://wordpress.org/extend/plugins/media-element-html5-video-and-audio-player/

  2. elainemarley
    Member
    Posted 1 year ago #

    I finally made it, I was on the right track, I just needed to add a container div with a certain width so that the video would extendo to fill it. This is my code:

    <div class="vidcontenedor">
    	<{$tagName} width="{$width}" height="{$height}" style="width:100%; height:100%;" id="wp_mep_{$mediaElementPlayerIndex}" controls="controls" {$attributes_string} class="mejs-player {$skin_class}" data-mejsoptions='{$options_string}'>
    
    		{$sources_string}
    
    		<object width="{$width}" height="{$height}" type="application/x-shockwave-flash" data="{$dir}flashmediaelement.swf">
    
    			<param name="movie" value="{$dir}flashmediaelement.swf" />
    
    			<param name="flashvars" value="controls=true&file={$flash_src}" />			
    
    		</object>		
    
    	</{$tagName}>
    </div>

    And then add a width to .vidcontenedor such as width:100% and you are good to go.

    I don't know if this works with the js version of mediaelement.js in this plugin, I replaced it with the one on the website because it's newer.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.