This plugin extends Kirby 2 CMS with some basic oEmbed functionalities.
It uses Essence and Multiplayer as PHP wrappers for oEmbed as well as phpfastcache as caching library.
Using this plugin enables Kirby 2 CMS to display embeds of several media sites (e.g. YouTube, Vimeo, Soundcloud) by only providing the URL to the medium. The plugin also includes some options to reduce the site loading time by using lazy videos (thumbnail preview and embed is only loaded after click) as well as extensive caching.
- Download Kirby oEmbed
- Copy the
site/plugins/oembed
directory tosite/plugins/
- Copy the
assets/oembed
directory toassets/
- Add CSS link to your header:
// site/snippets/header.php
echo css('assets/oembed/oembed.css');
If lazy video option is active:
5. Add the following JS links to your header:
// site/snippets/header.php
echo js('//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'); // if jQuery isn't included already
echo js('assets/oembed/oembed.min.js');
Instead of including additional CSS and JS links inside your header, you can also include the contents of assets/oembed/oembed.css
or assets/oembed/oembed.scss
as well as assets/oembed/oembed.js
in your existing CSS/SCSS and JS files.
If caching option is active:
6. You might need to set CHMODs for site/cache/oembed
and thumbs/oembed
- Replace the
site/plugins/oembed
andassets/oembed
directories with recent version - Delete
site/cache/oembed
andthumbs/oembed
There are two way to use Kirby oEmbed:
Inside (Kirbytext) fields:
Use (oembed: URL)
inside your Kirbytext. The URL has to point to a supported media (e.g. YouTube, Vimeo, Soundcloud).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(oembed: https://www.youtube.com/watch?v=wZZ7oFKsKzY)
In templates:
Use the field method ->oembed()
on fields that contain the link to the supported media (e.g. YouTube, Vimeo, Soundcloud).
<?php echo $page->featured_video()->oembed(); ?>
There are a few options you can set globally for Kirby oEmbed in site/config/config.php
:
// site/config/config.php
c::set('oembed.lazyvideo', true);
c::set('oembed.caching', false);
c::set('oembed.cacheexpires', 3600*24);
- oembed.lazyvideo:
Only after clicking on the videos thumbnail, the actual embed (iframe, object) is loaded (default: false) - oembed.caching:
Enable/disable caching of oEmbed HTML and video thumbnails (default: false) - oembed.cacheexpires:
Duration after the cached thumbnails expire in seconds (default: 3600)
There are a few optional parameters for some media sites. For the Kirbytext tag you can use them in the following way:
(oembed: https://www.youtube.com/watch?v=wZZ7oFKsKzY color: FF00FF)
And for the field method ->oembed()
:
<?php echo $page->featured_video()->oembed(array('color' => 'FF00FF')); ?>
The following parameters are available so far:
- YouTube
- color (hex value without the #)
- Vimeo
- color (hex value without the #)
- SoundCloud
- size (default/smaller/compact)
- visual (true/false)
- artwork (true/false)
You can set these parameters also globally for all oEmbed Kirbytext tags that do not specifiy the parameter themselves:
// site/config/config.php
c::get('oembed.defaults.color', 'FF00FF');
c::get('oembed.defaults.visual', 'true');
c::get('oembed.defaults.artwork', 'true');
c::get('oembed.defaults.size', 'compact');
Use Kirby oEmbed to embed featured videos to your blog posts. The URL to the video (e.g. on YouTube or Vimeo) is stored in a field calles ´video´ in this example.
// site/snippets/article.php
<article>
<aside class="entry-meta">
...
</aside>
<div class="entry-main">
<?php if ($post->video()!='') : ?>
<figure class="entry-cover">
<?php echo $post->video()->oembed(); ?>
</figure>
<?php endif : ?>
<div class="entry-content">
<?php echo $post->text()->kirbytext(); ?>
</div>
</div>
</article>