# oEmbed 2.0 is here - simply embed everything!

**URL:** <https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073>\
**Category:** Plugins\
**Created:** [May 6, 2016, 7:24pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073 "2016-05-06T19:24:56Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [May 6, 2016, 7:24pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/1 "2016-05-06T19:24:57Z")

</div>

![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/9/9e95f381af2a3a06608eddb1b83cf72928cdbe02.png)

The oEmbed plugin has been abandoned for quite some time. Due to a lack of time, but mostly because the underlying libraries were not that great anymore, with no developing happening on that side either. But this has come to an end…

# Version 2.0 is here!

oEmbed 2.0.0 is a complete rewrite based on a new library ([oscarotero/Embed](https://github.com/oscarotero/Embed) - under active development) but features most of the options of version 1 - but much more stable, with tons of new embed sources and lots of more awesomeness.

The general function is still a same: You have a field with a media url and apply the field method to it and you get the whole embed code:

```php
<?= $page->featured_video()->oemebed() ?>

```

Or you use the Kirbytext tag:

```ini
(oembed: https://vimeo.com/43444347)

```

 ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/d95461f2eeb58ff9c518fd946a92e3307c0aa82c.png)

There are some [options](https://github.com/distantnative/oembed#Options) and [a lot more information](https://github.com/distantnative/oembed#Advanced) that can be pulled

But **brand new** - it comes with its own **panel field** which offers instant preview of the embedded media. A quick sneak peak:

[https://github.com/distantnative/oembed/raw/master/docs/field.gif](https://github.com/distantnative/oembed/raw/master/docs/field.gif)

I hope you enjoy it - suggestions always welcome

### Documentation & Download

> **[distantnative/embed](https://github.com/distantnative/embed)**
>
> Media embed plugin for Kirby 2 CMS. Contribute to distantnative/embed development by creating an account on GitHub.

### An attempt of a changelog

- Requires Kirby 2.3.0
- Complete rewrite of PHP, CSS, JS
- All new panel field with great instant preview
- Works now with a lot more media (Spotify, pastebin, issu among others)
- Supports YouTube playlists and timecodes
- More reliable caching
- More consistent options
- Advanced acces to addtional information of the embedded media
- Using new library for collecting embed information ([oscarotero/Embed](https://github.com/oscarotero/Embed))

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [May 8, 2016, 12:16pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/2 "2016-05-08T12:16:51Z")

</div>

### A little preview of 2.1.0 and its more refined panel field:

 ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/4/488b1830e86aad866da28fb0d84eb4fd2b93c6fe.png)

 ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/3/33381cceabc8dbe30ef76bd73f3346567ae245d8.png)

---

<div class="post-metadata">

**Author:** ![afincato](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/afincato/32/3446_2.png) [@afincato](https://forum.getkirby.com/u/afincato)\
**Post date:** [May 8, 2016, 5:18pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/3 "2016-05-08T17:18:51Z")

</div>

I upgraded everything to the new version:

- site/plugin/oembed
- scss file
- js file
- blueprints

And what I get is the url of the media I want to display, instead of the actual media.

I didn’t touch the templates files because the code needed seems to be the same as it was before.

When I access the panel, I get a message saying:  
`The oembed field is missing. Please add it to your installed fields or remove it from your blueprint`

The inspector doesn’t provide any message error.  
What can I do? 😃

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [May 8, 2016, 5:56pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/4 "2016-05-08T17:56:13Z")

</div>

Are you using the latest beta version of Kirby 2.3? If yes, any way that you could send me your setup to check myself what’s not working? (maybe we can discuss that in private messages to not spam this thread)

EDIT:  
**Public Service Announcement**  
There is currently a bug in the Kirby 2.3 beta that prevents the plugin’s CSS to be delivered correctly (at least in Safari). Read: [https://github.com/getkirby/kirby/issues/441](https://github.com/getkirby/kirby/issues/441)

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [May 10, 2016, 6:51pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/5 "2016-05-10T18:51:45Z")

</div>

### Released 2.1.0

- Lots of panel field improvements:
  - Added section with information (e.g. title, author, source)
  - Added options to disable preview and information section
  - Added option to set a maximum height for the preview section
  - Added loading indicator for the preview section
  - Lots of smaller styling and script improvements
  - Fixed: ensured lazy loading of videos in the panel
  - Fixed: border colors on input focus
  - Moved field css assets to scss (using gulp)

- Added config options for provider API keys (`plugin.oembed.providers.facebook.key`, `plugin.oembed.providers.google.key` and `plugin.oembed.providers.soundcloud.key`)
- Added config option to enforce W3C validity (`plugin.oembed.w3c.enforce`)
- Added title to lazy loading video thumbs
- Added fallback for link type with no embed code
- Fixed: styles for specific providers (e.g. Flickr, phorkie, Meetup)
- Fixed: error message if information is loaded, but no embed code available
- Fixed: error display for videos with no embed code
- Plugin strings are now translatable (English & German already included)
- Safer autoloading of plugin components

---

<div class="post-metadata">

**Author:** ![Malvese](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/malvese/32/12375_2.png) [@Malvese](https://forum.getkirby.com/u/Malvese)\
**Post date:** [July 8, 2016, 5:29pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/6 "2016-07-08T17:29:11Z")

</div>

Is there a way to target a specific image size? There is an `images` array:

```auto
Array
(
    [0] => Array
        (
            [value] => https://farm2.staticflickr.com/1561/26050906811_67f3e25143_b.jpg
            [providers] => Array
                (
                    [0] => oembed
                )

            [width] => 683
            [height] => 1024
            [size] => 699392
            [mime] => image/jpeg
        )

    [1] => Array
        (
            [value] => https://farm2.staticflickr.com/1561/26050906811_67f3e25143_q.jpg
            [providers] => Array
                (
                    [0] => oembed
                )

            [width] => 150
            [height] => 150
            [size] => 22500
            [mime] => image/jpeg
        )

```

Can I display, say, size [1] of this array?  
Great plugin, it makes image embeds so simple 🙂 Loving it!

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [July 9, 2016, 3:39pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/7 "2016-07-09T15:39:39Z")

</div>

You mean as used image in the delivered embed code? Cause of course you could just access the image url that way.

---

<div class="post-metadata">

**Author:** ![Swissendo](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/swissendo/32/9528_2.png) [@Swissendo](https://forum.getkirby.com/u/Swissendo)\
**Post date:** [July 18, 2016, 2:06pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/8 "2016-07-18T14:06:56Z")

</div>

First of all: Thank you for updating this plugin, I absolutely love version 2.0. Sadly, I seem to have one small problem regarding the options per embed. I want to add a custom class to the wrapper using the following markup:

```
(oembed: https://twitter.com/getkirby/status/753855312302600193 class: test)

```

Which results in this div:

```
<div class="kirby-plugin-oembed kirby-plugin-oembed--rich kirby-plugin-oembed--Twitter " style="">

```

The class _.test_ doesn’t seem to get added to the wrapper. I’ve tried this on 2.1.0 and 2.2.0 and with different media sites, but I couldn’t get it working. Am I doing something wrong, or is this a bug?

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [September 3, 2016, 2:16pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/9 "2016-09-03T14:16:51Z")

</div>

Just released **version 2.3.1** with some enhancements and multiple bug fixes:

- Feature: Support various Vimeo url parameters
- Improved: Getting and setting custom url parameters
- Improved: Cheatsheet for the panel field is active by default
- Fixed: Global helper function was not working
- Fixed: Adding a custom CSS class via the Kirbytag was not working

**The test link for this release is: [https://www.youtube.com/watch?v=FGe766G0brk](https://www.youtube.com/watch?v=FGe766G0brk)**

@Swissendo: This version also fixes your problem, sorry for being so late.

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [March 22, 2017, 2:18pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/10 "2017-03-22T14:18:24Z")

</div>

Thread for version 3: [Embed v3 – easily embed your media sources!](https://forum.getkirby.com/t/embed-v3-easily-embed-your-media-sources/7036)

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [March 22, 2017, 2:18pm UTC](https://forum.getkirby.com/t/oembed-2-0-is-here-simply-embed-everything/4073/11 "2017-03-22T14:18:28Z")

</div>


