oEmbed in Drupal: Embed all the things!

​WordPress has great support for oEmbed, allowing content creators to paste in URLs that are automatically displayed as rich embedded content. You may also be familiar with similar behavior on Facebook and in chat services like Slack. Meanwhile in Drupal 7, most sites are using Media module with their WYSIWYG and are able to (with some effort) embed from certain providers. In Drupal 8, we finally have WYSIWYG in core, but no solution for adding videos and other embedded content. How can we have the ease of use of Wordpress for embedding 3rd party content?

oEmbed Module

The Drupal oEmbed module, despite its humble project description, works nicely, and can easily give you a similar experience as you get in Wordpress. I recommend signing up for an account with the Embed.ly service, and setting the cache lifetime high in the oEmbed module settings. This gives you access to a large number of oEmbed providers and for many sites if you use a high cache lifetime you can stay within the free usage tier. OEmbed module gives you the option of using an input filter to turn URLs in your textareas into embeds, or you can use oEmbed Field submodule, which allows you to add link fields and use an oEmbed display formatter.

Asset Module: How are you so awesome and so overlooked?

The ability to use oEmbed in a field got me thinking about one of my favorite (and highly underrated) modules: Asset module. Asset module is essentially an alternative to the widely-used Media module (Scald is a third option in this space). While Media currently boasts 262,680 site installs, Asset is used by a humble 1,167. Drupalers are often advised that a good way to tell which module is the best when choosing between similar modules is to pick based on usage statistics and how much active development is occurring. Unfortunately, this is not foolproof advice: beware echo chambers.

If you've worked with Media module much (disclaimer: I was involved in early stages of Media module architecture and development), you're probably familiar with some of its flaws: an ever-changing variety of complex bugs on its 2.x branch, complicated relationship between Media and File Entity configurations, no straightforward method to add captions to images, multiple dialogs to click through just to add an image, bugs when you disable and re-enable rich text, and difficulty editing items after you add them to the WYSIWYG, to name a few.

Asset module in contrast has a lovely UI, provides common features out of the box (add an image to the WYSIWYG with working captions and right/left alignment), is simple to configure and use, relatively bug-free, and stable. It provides many of the same features as Media, like a library of reusable media assets you can add to a WYSIWYG or display in Views and the ability to add your own fielded bundles for various types of assets. In addition Asset module lets you pick your own WYSIWYG button icons and have a separate button in your WYSIWYG for each type of asset (image, video, document) and unlike Media module it is not directly tied to files. This means you can create Asset types for reusable, centrally-managed structured content that are not file-based at all. I like to make Asset types for things like Addresses and Calls to Action which authors can use within their WYSIWYG. You can quickly explore the wonders of Asset module on its demo site - make sure in addition to the WYSIWYG buttons you try out the 'Asset Widget' on the right side of the content creation page and see how you can drag existing assets into not only textareas but also entityreference fields.

oEmbed with Asset Module

What does this have to do with oEmbed? Well, guess what happens if you add a new Asset type with a link field you set to display as oEmbed? Yup, now you have an Embed button on your WYSIWYG that lets your authors paste in a URL from any of those services, or reuse embeds they've already added to their Asset library. No more adding separate modules to be able to integrate with YouTube, Vimeo, and more. In fact, now we have a better user experience than WordPress! The embeds even show up already rendered right in your WYSIWYG.

Here are some examples of embeds I can put into this WYSIWYG (content from myself and my old band from around the internet):

A song on Rdio

A video on YouTube

A tweet

A photo on Flickr

A LinkedIn user

A Github gist

A JibJab

Editor Experience

Want to see how it looks in my WYSIWYG? Let me embed a screenshot with my Asset image button!

My WYSIWYG right now... Like my caption?

The buttons on the right in my WYSIWYG are for Assets. I have a Document, Image, 'Call to Action', and then Embed Asset Types, followed by the Search button that lets me use my Asset library. By the way, the 'Call to Action' is just a link field that outputs like:

Get Asset Module!

When I press the Embed button, I embed an asset like

To add an embed, just paste in a URL. Note you pick your Asset button - here I'm using a heart because I heart this setup. You can also add your own icons (patch in the queue).

Please tune in for Part 2 of this series on how to set this up on your Drupal 7 site and Part 3: Embedding in Drupal 8.

Terms:

Publishing Workflow

Ready for Publishing

Original Article: