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?
You could create your own custom Kirbytag
But have a look at the Embed plugin, it supports Soundcloud embeds.
1 Like
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&color=%23ff0000&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
in soundcloud case, the soundcloud tag should be replacing the:
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 }
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:
Can I mark this as solved, @Rrr?
Worked really well, thank you!
I just made the custom text area button to add (embed: http://)