making mediaelement.js responsive

  • Resolved kevinhaig

    (@kevinhaig)


    10 years, 11 months ago

    I am testing WordPress 3.6 Beta 3 and have been having difficulty making the media player responsive.

    I have added the following filter which does work.

    /**
 * filter audio shortcodes to add width="100%"
 * @link http://www.jasonbobich.com/wordpress/making-self-hosted-html5-video-and-audio-players-in-wordpress-3-6-responsive/
 */
function ka_express_audio_shortcode( $html ){
	return str_replace('<audio', '<audio width="100%"', $html);
}
add_filter('wp_audio_shortcode', 'ka_express_audio_shortcode');

    However there appears to be a bug in mediaelement.js. The css is breaking in responsive mode and the volume slide bar displays outside and below the player. When you change the screen size the volume slider pops into position and out of position repeatedly, suggesting a calculated and returned width issue, within the plugin.

    I’m a newbie when it comes to jQuery but this appears to be the fix…

    In mediaelement-and-player.js :

    Replace: b = this.controls.width() – a – (c.outerWidth(true) – c.width())
    with: b = this.controls.width() – a – (c.outerWidth(true) – c.width())-1

    What this does is always forces .mejs-time-rail width to be 1 px less than calculated so the css is never broken.

    Is there any chance of getting someone to look into this.

Viewing 3 replies - 16 through 18 (of 18 total)
1 2
  • Shmoo

    (@macpresss)

    10 years, 3 months ago

    Hello guys,

    Just curious, how can I deregister the stylesheets of this media component?
    I like the JS stuff just wanna stop-/block the stylesheets

    Those two please:
    mediaelementplayer.min.css
    wp-mediaelement.css

    I would like to include those styles inside my theme’s styles.css and customize them a little bit.

    I don’t like 18KB Jony Ive gradients in my theme 😛

    Shmoo

    (@macpresss)

    10 years, 3 months ago

    Got it..

    Already had this piece of code in my functions.php

    function shmoo_scripts() {
	wp_enqueue_style( 'shmoo-style', get_stylesheet_uri() );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
}
add_action( 'wp_enqueue_scripts', 'shmoo_scripts' );

    So I added this line of code against it.

    wp_deregister_style( 'mediaelement' ); // Deregister 'mediaelement' stylesheets.

    Just after the line: wp_enqueue_style(…..

    Hope that helps.

    simsalabim

    (@simsalabim)

    10 years, 3 months ago

    I am using 3.8 and still got the issue. Though I think I based my theme on Twentytvelve not Twentythirteen.

    I think it would be great if the WordPress team could also fix the issue in Twentytvelve and eleven as for certain circumstances those themes still come in handy.

    As kevinhaig mentioned:

    I’ve noticed the twentythirteen theme is not having the same problem and I’m investigating what the theme developer has done to avoid the problem.

    cheers

Viewing 3 replies - 16 through 18 (of 18 total)
1 2
  • The topic ‘making mediaelement.js responsive’ is closed to new replies.