SoundCloud Embed Widget

Started by shawnb61, May 08, 2022, 10:05:59 PM

Previous topic - Next topic

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
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

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:
[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.
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

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.
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

Marina3


shawnb61

Quote from: Marina3 on December 11, 2022, 05:51:22 AMERROR: 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...
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

AllMassive

Quote from: shawnb61 on November 24, 2022, 12:29:31 PMNote 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 8)

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.

Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

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

#11
Quote from: Julius_2000 on March 17, 2023, 03:59:36 PMThanks! 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

Quote from: mickjav on March 18, 2023, 06:40:16 AM
Quote from: Julius_2000 on March 17, 2023, 03:59:36 PMThanks! 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:

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:

$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

Quote from: Julius_2000 on March 18, 2023, 07:06:05 AM
Quote from: mickjav on March 18, 2023, 06:40:16 AM
Quote from: Julius_2000 on March 17, 2023, 03:59:36 PMThanks! 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:

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:

$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.
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

mickjav

Seems to work without issue with my themes.

It's a very useful mod for me thanks.

All the best mick.

Julius_2000

Quote from: shawnb61 on March 24, 2023, 01:13:31 AMI'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.

Advertisement: