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.
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 }
Can I mark this as solved, @Rrr?
Worked really well, thank you!
I just made the custom text area button to add (embed: http://)