oEmbed 2.0 is here - simply embed everything!

Plugins
, , , ,
1

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 - 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:

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

Or you use the Kirbytext tag:

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

example1.png1828×1288 1.04 MB

There are some options and a lot more information 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

I hope you enjoy it - suggestions always welcome

Documentation & Download

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)
7 Likes
2

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

Screen Shot 2016-05-08 at 14.15.09.png1212×952 530 KB

Screen Shot 2016-05-08 at 14.15.31.png1208×1054 864 KB

2 Likes
3

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? :smiley:

4

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

5

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
6

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

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 :slight_smile: Loving it!

7

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

8

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?

9

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

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

3 Likes
10

Thread for version 3: Embed v3 – easily embed your media sources!