SoundCloud Embed Widget

[shawnb61]

Link to the mod

Description:
The SoundCloud Embed Widget mod lets you play SoundCloud files on your site via the SoundCloud widget.

This is a simple BBC addition, and the BBC generated is compatible with the similar SMF 2.0 mod.

Releases:
 - v1.3 Initial public release

[Gryzor]

Works beautifully! Would prefer an auto-embedder but it does the job  Thanks!

[AllMassive]

i am too dumb - how to use this?
for example - this doesnt work for me on 2.1.x:

Code Select Expand

[soundcloud]https://soundcloud.com/alchemy_ldn/the-advent-alchemy-the-cause-closing-party-dec-2022[/soundcloud]

[shawnb61]

The above link works fine as-is, see attached.

Did the install go OK?  No errors in the error log?

Since this is a hooks-only mod, you can simply try an uninstall & then reinstall.

You cannot view this attachment.

[shawnb61]

Note also that the SoundCloud embed widget provided by SoundCloud uses iframes. 

Sometimes browsers restrict usage of iframes.  You may need to research this for your browser, or try another browser.

[Marina3]

ERROR: Undefined variable: sc.

[shawnb61]

ERROR: Undefined variable: sc.

I cannot reproduce this.  More info would help.  File? Line#?

Note that "sc" isn't used in the source for this mod...

[AllMassive]

Note also that the SoundCloud embed widget provided by SoundCloud uses iframes. 

Sometimes browsers restrict usage of iframes.  You may need to research this for your browser, or try another browser.

i needed to turn some firefox security checks lower - ever since it works as intended.
thank you for that nice mod

[Julius_2000]

Hi,

is there a way via this mod to set a class within the iframe or encapsulate the embed with a div that can be assigned with a customizable class like in this mod? Reason is, I had to make a workaround for iframes used for video etc. because those would go outside their divs on smaller screens that are smaller than the fixed values within these iframes. I used an aspect-ratio property for it which now also affects the Soundcloud embed, making it bigger as it needs to be. A class inside iframe would actually help customizing it, other HTML elements did not respond to my editing attempts including using them with the !important command, so I presume the iframe supersedes that.

There's no parse option for this mod so I can't figure out what it changes/adds and try myself. Any help would be appreciated!

[shawnb61]

No need to parse, it's hooks only.

Feel free to take a peek - all my source is up on GitHub:
https://github.com/sbulen/SMF-SoundCloud-Embed-BBC

Of course it's in your /Sources folder as well.

[Julius_2000]

Thanks! I think I figured it out. I found the SoundCloudEmbedHooks.php in the Sources folder and discovered the iframe. I put a class inside and it Works great.

Cheers!

[mickjav]

Thanks! I think I figured it out. I found the SoundCloudEmbedHooks.php in the Sources folder and discovered the iframe. I put a class inside and it Works great.

Cheers!

Would you post the class Code, as would be interested in a way of not using iframs

All the best mick

Thanks to @shawnb61 for this mod fits in to my site nicely.

Edit: I have added a simple how to on my site Hope it's of use 

[Julius_2000]

Thanks! I think I figured it out. I found the SoundCloudEmbedHooks.php in the Sources folder and discovered the iframe. I put a class inside and it Works great.

Cheers!

Would you post the class Code, as would be interested in a way of not using iframs

All the best mick

Yes, of course! But it's still using iframes, though.

So just for the reason why I needed that: I created a code for iframes in index.css because videos/ Tweets etc. would go off-screen on smaller screen sizes:

Code Select Expand

iframe {
      display: flex;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      aspect-ratio: 16/9;
      overflow: hidden;
}
It turned out the aspect ratio was affecting the size of the Soundcloud box.

So, I included a class simply named soundcloud inside the iframe in SoundCloudEmbedHooks.php where it says:

Code Select Expand

$tag['content'] = '<iframe class="soundcloud" width="100%" height="130" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=' .
                $whole_url .
                '&color=%237c6c64&auto_play=false&sharing=false&download=false&show_playcount=false&show_artwork=true"></iframe>' .
                '<div style="font-size:10px;color:#cccccc;line-break:anywhere;word-break:normal;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight:100;">' .
                '<a href="https://soundcloud.com/' . $artist . '" title="' . $artist . '" target="_blank" style="color:#cccccc;text-decoration:none;">' . $artist . '</a> · ' .
                '<a href="' . $whole_url . '" title="' . $track . '" target="_blank" style="color:#cccccc;text-decoration:none;">' . $track . '</a></div>';
        }
    }


In my index.css I just added this code to customize the iframe behavior:
iframe.soundcloud {
        aspect-ratio: auto;
}

[mickjav]

Thanks! I think I figured it out. I found the SoundCloudEmbedHooks.php in the Sources folder and discovered the iframe. I put a class inside and it Works great.

Cheers!

Would you post the class Code, as would be interested in a way of not using iframs

All the best mick

Yes, of course! But it's still using iframes, though.

So just for the reason why I needed that: I created a code for iframes in index.css because videos/ Tweets etc. would go off-screen on smaller screen sizes:

Code Select Expand

iframe {
      display: flex;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      aspect-ratio: 16/9;
      overflow: hidden;
}
It turned out the aspect ratio was affecting the size of the Soundcloud box.

So, I included a class simply named soundcloud inside the iframe in SoundCloudEmbedHooks.php where it says:

Code Select Expand

$tag['content'] = '<iframe class="soundcloud" width="100%" height="130" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=' .
                $whole_url .
                '&color=%237c6c64&auto_play=false&sharing=false&download=false&show_playcount=false&show_artwork=true"></iframe>' .
                '<div style="font-size:10px;color:#cccccc;line-break:anywhere;word-break:normal;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight:100;">' .
                '<a href="https://soundcloud.com/' . $artist . '" title="' . $artist . '" target="_blank" style="color:#cccccc;text-decoration:none;">' . $artist . '</a> · ' .
                '<a href="' . $whole_url . '" title="' . $track . '" target="_blank" style="color:#cccccc;text-decoration:none;">' . $track . '</a></div>';
        }
    }


In my index.css I just added this code to customize the iframe behavior:
iframe.soundcloud {
        aspect-ratio: auto;
}

Thanks I understand now I'll check see if My Themes give that problem if so I'll apply your fix Thanks

All the best mick

[shawnb61]

I'm a little confused by some of this, because the existing code already makes sure it won't expand beyond the current width.  I.e., it works fine on mobile, etc., as-is. 

What broke specifically here was the custom .css for iframes shown above that overrode this mod's behavior.

So...  Next version, I will add a class to make it easier for folks to update .css. 

But...  I don't think there are any .css changes needed unless you have existing broader overrides, such as the iframe one shown above.

[mickjav]

Seems to work without issue with my themes.

It's a very useful mod for me thanks.

All the best mick.

[Julius_2000]

I'm a little confused by some of this, because the existing code already makes sure it won't expand beyond the current width.  I.e., it works fine on mobile, etc., as-is. 

What broke specifically here was the custom .css for iframes shown above that overrode this mod's behavior.

So...  Next version, I will add a class to make it easier for folks to update .css. 

But...  I don't think there are any .css changes needed unless you have existing broader overrides, such as the iframe one shown above.

It's not specific to your Soundcloud mod - which is fantastic! -  but rather to video and other media files that were embedded via the mod "S.A.V.E.". It loads their iframes and thus caused videos and other media like Instagram to go off-screen on smaller screens because of their fixed pixel values for their dimensions.

So I had to come up with a workaround and experimented a bit. I then addressed it at the iframe level (I'm a novice at all of this, only started last year) which worked. But it apparently also affected your Soundcloud mod, as it also uses iframes. Since I had set a 16/9 aspect-ratio for my own iframe code in index.css,  it also stretched the Soundcloud embed, making it bigger than it should be. So I needed to make it individual in order to be able to independently customize it - or rather exclude it from my customization. I was able to include a class which helped.