Skip to main content

Support for oEmbed opens up wealth of opportunities for embedded content

Submitted by daniel on

Drupal 8.6.0 has an out-of-box adds support for embedding remote YouTube and Vimeo videos by means of the oEmbed format. You may notice these are often encapsulated in an iframe. You can see this evident in a new media type being defined called 'Remote Video' available form /admin/structure/media. A new icon is also available form your wysiwyg that allows you to embed the new format in your page or block.

Selecting this we see that the default options for remote video, aka oEmbed, are restricted to Youtube and Vimeo. Remember The Embed media filter must be enabled to use the Insert from Media Library button.

Media's oEmbed support provides support for the full list of oEmbed providers listed https://github.com/iamcal/oembed/tree/master/providers or https://oembed.com/providers.json. This can also be extended to non canonical  providers and in fact in Drupal there is a a contributed module to help with customising support for additional oEmbed providers - https://www.drupal.org/project/oembed_providers.

Drupal provides a framework that will allow you to add support for embedding others websites content on your page, and with some custom coding this can be achieved. More info on that https://www.savaslabs.com/blog/oembed-drupal-8

Here we have a look at some of the listed oEmbed providers that are worth looking at in my opinion

  1. https://hearthis.at/ - Alternative to Soundcloud - seems more community driven
  2. https://soundcloud.com - The original audio streaming community
  3. https://www.rcvis.com - Charts, graphs, and tables to help your audience understand the results of a Ranked Choice Voting election. Export to Wikipedia, embed with HTML, or share to social media.
  4. https://odesli.co - add smart links designed to promote your song album or podcast
  5. https://www.flickr.com - photo sharing
  6. https://mixcloud.com - mix show sharing platform
  7. https://learningapps.org - LearningApps.org is a Web 2.0 application, to support learning and teaching processes with small interactive modules.
  8. scribblemaps.com - Easily create embeds, images, and map data for free.
  9. https://showtheway.io/ - embed a link to your location
  10. https://sketchfab.com - Upload and embed 3d model viewer

There are 2 to 3 hundred oEmbed canonical providers listed by default at the time of writing. However there are probably many more non official providers that support the oEmbed standard. I would be interested to know of any that you think also deserve a mention.

It is also worth mentioning that their is the url_embed  module that adds support for all these providers and makes it easy to add via your wysiwyg.  That said it seems that different oEmbed providers will need to be handled separately as they likely to have non standard attributes when it comes to setting width and height to be displayed etc. In fact there are various 'types' of oembed including photo, video, link, and rich. Notably the main delta here is that photo expects an 'url' attribute as opposed to a html key value pair expected for video, link and rich.

url_embed is dependent on the embed module that provides the underlying framework for embedding documents using your wysiywg editor. 

Also when displaying the html attribute, it is recommended to  `load the HTML in an off-domain iframe to avoid XSS vulnerabilities'`. https://oembed.com. Drupal makes it easy for you to do this. More on that later.

If you want to check how your chose oEmbed content looks, check out http://debug.iframely.com

 

 

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.