Can someone give an example on how to embed the SoundCloud player properly? When using the embedding iframe given by SoundCloud (with width="100%"), the player spans 50% of the post’s width only.
In general it would be nice if writefreely could “make it easier” to nicely embed contents. For example, to embed a YouTube video one has to use a hack to make it span the full width (as far as I know).
Hi @schu! One trick I’ve found to help with this is to add custom CSS to your blog that maximizes the width of any iframe. Here is the code:
iframe { width: 100%; }
It will work for both Soundcloud and Youtube videos. Note that you still have to do the hacks when dealing with drafts/anonymous posts but, if you add the CSS to a blog, it will make the embed’s width of any post on that blog 100%.
Thanks @cjeller1592 that does the trick (either in the custom CSS or with style="width: 100%;") and works contrary to the iframe’s width attribute.
@matt as a feature request: it would be great if writefreely would have “shortcodes” (similar to Hugo, https://gohugo.io/content-management/shortcodes/#youtube) for embedding content from popular websites. They would make user’s life easier and at the same time allow for updates in the future (only shortcode has to be updated, not all posts manually).
Glad it works @schu! I just recommended it in the custom CSS so you didn’t have to worry about putting in style="width:100% every time you embed something.
Currently we only have shortcodes for adding “Read More” (<!--more-->) and email subscriptions for Write.as users (<!--emailsub-->). Adding more shortcodes like the one you mentioned would be awesome! Are there any other shortcodes that come to mind that would be useful in your writing workflow besides embeds (Youtube, Soundcloud, etc)?
Not at the moment. I guess with “the right implementation” it should be easy to add more and only involve adding a few more lines of code (e.g. adding new entry in a var shortcodes map[string]string for “short code -> html template snippet”).
Is this something that is in the works or do you have an implementation in mind for which you would accept a pull request?
Yeah, the right implementation would do the trick.
There’s nothing in the works yet and no implementation in mind. Personally, I’ve liked how Dev.to implemented Liquid Tags. For example, a Twitter embed would be:
{% twitter 834439977220112384 %}
That allows some flexibility with only a few lines of code. I’d be curious what @matt and others think.
I just posted a youtube video on https://sfss.space: works great for mobile AND desktop with the iframe tip, but the vid doesn’t appear in the newsletter.
