WordPress.org

Ready to get started?Download WordPress

Forums

oembed Soundcloud sets fixed width instead of 100% (13 posts)

  1. marco-raaphorst
    Member
    Posted 1 year ago #

    check the first Soundcloud object here http://marcoraaphorst.nl/portfolio/

    it's an oembed object which sets a width of 800 pixels. when I use iframe it wil use the default of 100% which is better because that will scale/responsive. the oembed method is not useful for responsive designs. I hope wordpress will be fixed for next update

  2. marco-raaphorst
    Member
    Posted 1 year ago #

    fixed it with in CSS:
    iframe {max-width: 100%;}

    still: hard values for iframes/oembed is not a way to go for responsive themes. I hope WordPress is aware of this.

  3. That sounds like an issue with your theme, and not core WP.

  4. Samuel Wood (Otto)
    Tech Ninja
    Posted 1 year ago #

    Actually, it is sorta a core issue, because core's oembed support doesn't have an easy way to make the width parameter optional.

    A filter was introduced about a year ago to make this sort of thing possible: http://core.trac.wordpress.org/ticket/16996

    You can use this filter like so, to remove the maxwidth from the request to soundcloud:

    add_filter('oembed_fetch_url', 'soundcloud_no_width', 10, 3);
    function soundcloud_no_width($provider, $url, $args) {
    	if ( 'soundcloud.com' == parse_url( $url, PHP_URL_HOST ) ) {
    		$provider = remove_query_arg( 'maxwidth', $provider );
    	}
    	return $provider;
    }
  5. marco-raaphorst
    Member
    Posted 1 year ago #

    thanks. added that code to functions.php but it didn't work. no re-scaling.

  6. Samuel Wood (Otto)
    Tech Ninja
    Posted 1 year ago #

    That doesn't rescale it, it just removes the maxwidth parameter from the info being sent to soundcloud. What they return is up to them. If you want it to return some different maxwidth, then you need to use add_query_arg to change it there instead.

  7. marco-raaphorst
    Member
    Posted 1 year ago #

    mmm, not sure how to do that.I want soemthing like this:

    add_filter('oembed_fetch_url', 'soundcloud_no_width', 10, 3);
    function soundcloud_no_width($provider, $url, $args) {
    	if ( 'soundcloud.com' == parse_url( $url, PHP_URL_HOST ) ) {
    		$provider = add_query_arg( '100%', $provider );
    	}
    	return $provider;
    }

    make the width 100% because that how the soundcloud code works on iframes.

  8. Samuel Wood (Otto)
    Tech Ninja
    Posted 1 year ago #

    But you shouldn't need to specify it as 100%, that's their default value.

    Look, their docs say the maxwidth defaults to 100% here:
    http://developers.soundcloud.com/docs/oembed

    And if you actually test the oembed URL without specifying a maxwidth, sure enough, the resulting iframe says width=100%:
    http://soundcloud.com/oembed?format=json&url=http://soundcloud.com/forss/flickermood

    Note that oembed only processes *on post save*. If you're just adding this code and not actually updating your post or making a new post, you won't see any changes.

  9. marco-raaphorst
    Member
    Posted 1 year ago #

    thanks! it's working now. but it also means I need to resave all posts.... this is not easy. I hope wordpress fixes this issue.

  10. marco-raaphorst
    Member
    Posted 1 year ago #

    but this code doesn't work for youtube:

    add_filter('oembed_fetch_url', 'youtube_no_width', 10, 3);
    function youtube_no_width($provider, $url, $args) {
    if ( 'youtube.com' == parse_url( $url, PHP_URL_HOST ) ) {
    $provider = remove_query_arg( 'maxwidth', $provider );
    }
    return $provider;
    }

    what am I doing wrong?

  11. lionsdendesigns
    Member
    Posted 1 year ago #

  12. Samuel Wood (Otto)
    Tech Ninja
    Posted 1 year ago #

    That code doesn't work for YouTube because YouTube doesn't return variable width embed code, only fixed width code.

    Every provider is different and must be handled differently.

  13. marco-raaphorst
    Member
    Posted 1 year ago #

    aha. I think oembed in WordPress doesn't make much sense. it gets the iframe code based on the oembed-url when saving the post. so you might as well save the iframe code with the post because either oembed or iframe creates the same fixed code which can only be changed by resaving the post. that's not flexible when you have like hundreds of posts.

    thanks for the help people! I will use iframe code instead. hopefully wordpress will use a more flexible system in the future.

Topic Closed

This topic has been closed to new replies.

About this Topic