Soundcloud embed


#1

I’m curious if there’s a way to embed SoundCloud frame the way YouTube, Vimeo can be from Easily embed HTML5 Videos using (vimeo: http://vimeo.com/32875422).

Could that be customized somewhere in Kirby?


#2

You could create your own custom Kirbytag

But have a look at the Embed plugin, it supports Soundcloud embeds.


#3

Thanks, that is really helpful.

the Embed Plugin is great, but doesn’t allow the embeding to happen within the textarea, which is a pitty in an essay/article situation where visual/sound references are the Bomb!

After creating the custom tag, i’m curious whats the easiest way for the tag to add the following embed on the page:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/browser-link-here&amp;color=%23ff0000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>

in soundcloud case, the soundcloud tag should be replacing the:

https://soundcloud.com/browser-link-here

with whatever is in the browser as link.
Tested as a static iframe.

Basically I’ve made a custom text area button to add:
(soundcloud: http:// )
where the http:// is to be the soundcloud browser url, following Perry’s solution in Visual-markdown editor: How add new button in toolbar

I’ve been looking how the youtube embeding gets created. Would just adding a Soundcloud version to the same files in the ones below work? Or there’s a better way to embed iframe only in /site/tags/soundcloud.php ?

/Users/path/to/website/kirby/extensions/tags.php:
  250  );
  251  
  252: kirbytext::$tags['youtube'] = array(
  253    'attr' => array(
  254      'width',
  ...
  267      }
  268  
  269:     return '<figure class="' . $tag->attr('class', kirby()->option('kirbytext.video.class', 'video')) . '">' . embed::youtube($tag->attr('youtube'), array(
  270        'width'   => $tag->attr('width',  kirby()->option('kirbytext.video.width')),
  271        'height'  => $tag->attr('height', kirby()->option('kirbytext.video.height')),
  272:       'options' => kirby()->option('kirbytext.video.youtube.options')
  273      )) . $figcaption . '</figure>';
  274  

/Users/path/to/website/kirby/helpers.php:
  171  
  172  /**
  173:  * Builds a Youtube video iframe
  174   *
  175   * @param string $url
  ...
  179   * @return string
  180   */
  181: function youtube($url, $width = null, $height = null, $class = null) {
  182    return kirbytag(array(
  183:     'youtube' => $url,
  184      'width'   => $width,
  185      'height'  => $height,

/Users/path/to/website/kirby/kirby.php:
   80        'kirbytext.video.width'           => false,
   81        'kirbytext.video.height'          => false,
   82:       'kirbytext.video.youtube.options' => array(),
   83        'kirbytext.video.vimeo.options'   => array(),
   84        'kirbytext.image.figure'          => true,

/Users/path/to/website/kirby/test/etc/kirbytext/youtube/expected.html:
    1: <figure class="video"><iframe src="//youtube.com/embed/VhP7ZzZysQg" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"></iframe></figure>

/Users/path/to/website/kirby/test/etc/kirbytext/youtube/test.txt:
    1: (youtube: https://www.youtube.com/watch?v=VhP7ZzZysQg)

/Users/path/to/website/kirby/vendor/getkirby/toolkit/lib/embed.php:
    5   *
    6   * Simple embedding of stuff like
    7:  * flash, youtube videos, vimeo videos or gists
    8   *
    9   * @package   Kirby Toolkit
   ..
   16  
   17    /**
   18:    * Embeds a youtube video by passing the Youtube url
   19     *
   20:    * @param string $url Youtube url i.e. http://www.youtube.com/watch?v=d9NF2edxy-M
   21     * @param array $attr Additional attributes for the iframe
   22     * @return string
   23     */
   24:   public static function youtube($url, $attr = array()) {
   25  
   26:     // youtube embed domain
   27:     $domain = 'youtube.com';
   28  
   29:     // http://www.youtube.com/embed/d9NF2edxy-M
   30:     if(preg_match('!youtube.com\/embed\/([a-z0-9_-]+)!i', $url, $array)) {
   31        $id = $array[1];
   32:     // https://www.youtube-nocookie.com/embed/d9NF2edxy-M
   33:     } else if(preg_match('!youtube-nocookie.com\/embed\/([a-z0-9_-]+)!i', $url, $array)) {
   34        $id     = $array[1];
   35:       $domain = 'www.youtube-nocookie.com';
   36:     // http://www.youtube.com/watch?feature=player_embedded&v=d9NF2edxy-M#!
   37      } elseif(preg_match('!v=([a-z0-9_-]+)!i', $url, $array)) {
   38        $id = $array[1];

/Users/path/to/website/kirby/vendor/getkirby/toolkit/lib/url.php:
  218     * <code>
  219     *
  220:    * echo url::stripQuery('http://www.youtube.com/watch?v=9q_aXttJduk');
  221:    * // output: http://www.youtube.com/watch
  222     *
  223     * </code>

/Users/path/to/website/kirby/vendor/getkirby/toolkit/test/EmbedTest.php:
    5  class EmbedTest extends PHPUnit_Framework_TestCase {
    6  
    7:   public function testYoutube() {
    8  
    9      // default url variants
   10      $urls = [
   11:       'http://www.youtube.com/embed/d9NF2edxy-M',
   12:       'http://www.youtube.com/watch?feature=player_embedded&v=d9NF2edxy-M#!',
   13        'http://youtu.be/d9NF2edxy-M',      
   14      ];
   15  
   16      foreach($urls as $url) {
   17:       $expected = '<iframe src="//youtube.com/embed/d9NF2edxy-M" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" width="100%" height="100%"></iframe>';
   18:       $this->assertEquals($expected, embed::youtube($url));
   19      }
   20  
   21      // nocookie domains
   22:     $expected = '<iframe src="//www.youtube-nocookie.com/embed/d9NF2edxy-M" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" width="100%" height="100%"></iframe>';
   23:     $this->assertEquals($expected, embed::youtube('http://www.youtube-nocookie.com/embed/d9NF2edxy-M'));
   24  
   25    }

#4

The reason why I suggested the Embed plugin is because it comes with an embed tag, so you can do this in your textarea fields:

(embed: https://soundcloud.com/postmalone/rockstar-feat-21-savage)

Result:


#5

Can I mark this as solved, @Rrr?


#6

Worked really well, thank you!
I just made the custom text area button to add (embed: http://)