XF 1.1 SoundCloud HTML5 embed with dropdown

[Cala_Marie]

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:

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

  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:

  $(".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).

 

[Cala_Marie]

Jason P over at Stack Exchange has saved the day.

Here's the final JS:

jQuery(document).ready(function () {
    $('.soundCloudEmbed').each(function () {
        var soundSrc = $(this).attr("src");
        var isSet = (soundSrc).search('%' + '2Fsets' + '%' + '2F');
        if (isSet > -1) {
            $(this).hover(function () {
                $(this).addClass("soundCloudHover");
            }, function () {
                $(this).removeClass("soundCloudHover");
            });
        }
    });
});

Live demo: http://jsfiddle.net/dSX5g/