• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.1 SoundCloud HTML5 embed with dropdown

#1
A quick rundown of the changes I've made so far:
  • Added the BB Code media site SoundCloud:
    • Match URL (using regex): #soundcloud\.com/(?P<id>[a-zA-Z0-9\/_-]+?)#siU
    • Embed this HTML:
      Code:
      <iframe class="soundCloudEmbed" width="100%" height="450px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/{$id}&color=0085ff&auto_play=false&show_artwork=false"></iframe>
  • Added this to EXTRA.css:
    Code:
    iframe.soundCloudEmbed {
        position: relative;
        height: 166px;
        transition: height 250ms ease-in-out, margin-bottom 250ms ease-in-out;
    }
        iframe.soundCloudEmbed.soundCloudHover {
            position: relative;
            height: 450px;
            margin-bottom: -284px;
            z-index: 9999;
      }
  • Added this to page_container_js_body:
    Code:
    $(".soundCloudEmbed").hover(
        function () {
            $(this).addClass("soundCloudHover");
        },
        function () {
            $(this).removeClass("soundCloudHover");
        }
    );
The result is that moving your cursor over a SoundCloud widget causes it to fold out (animated gif).

The problem I'm dealing with now is that all SC widgets fold out, whether they're part of a set/playlist or not. If the sound isn't part of a playlist, hovering over it results in a large empty space (animated gif).

Is it possible to set this up so that the widget only folds out if its sound is part of a set/playlist?

Edit: To clarify, SC's HTML5 widget detects its own size on its own and adjusts its content accordingly (sound only if it's 166px high, sound + playlist if it's 450px high).
 
Last edited: