Integrate third-party media with URL embed on Drupal 8

a tablet with media displayed

You want to allow your content editors to easily retrieve and integrate media, images, videos, sounds, presentations from third-party platforms? The Media entity suite has an extra string to its bow with the URL embed module. This module uses the PHP Embed library, and allows you to simply retrieve from a url a media from a third-party platform like Twitter, YouTube, Instagram, SoundCloud, Spotify, Vimeo, Slideshare, etc. To mention only the best known.

This module allows you to integrate a remote media within a text field or from a dedicated link field type. Let us discover how this module works, very simply besides.

Installing the module

You can install this module with Composer (composer require drupal/url_embed ~1.0). This method will download the module, as well as its dependencies, namely the Embed module and the PHP Embed library. If you want to install it from drush, or by downloading its archive, you will have to download these dependencies, and in particular place the PHP library in the /vendor directory of your site.

Configuration and use with CKEditor

Once installed, this module provides an embed button by default. This button will be available later in the CKeditor options for the text formats using it. You can customize this button, change its icon, and add as many as you need.

Bouton URL Embed pour insérer des médias dans un body

This button will then be available in the available CKeditor buttons.

Configuration CKEditor

To enable media integration, drag the previously created button into the CKeditor  active bar. In the example below we configure the full HTML text format.

We activate too the two filters provided by the URL embed module.

 

URL embed filters

The first filter Convert URLs to URL embeds automatically converts a link pasted directly into the text body, and transform it into an url that can be processed by the second filter.

The second filter Display embedded URLs allows to transform the link added with the dedicated media dialog box.

In order to automatically transform the pasted urls directly into the body, the first filter must be placed before the second in the filter processing order settings applied to the text format. 

Ordre des filtres

If you have enabled the Limit allowed HTML and correct faulty HTML filters, then the following tag should be added to the Allowed Tags input field:

<drupal-url data-*>

As shown in the capture below.

Balises autorisées

 

You also have the option of filtering the type of url that you want to convert automatically. For example, if you want only Twitter urls to be converted automatically, you can enter https://twitter.com in this field. Leave it empty to allow any type of urls.

 

limiter par type d'url les urls converties

And your text format is configured. All you have to do now is to insert media using links, either with the button and its dialog box.

 

Insérer un média distant

Or simply by copying / pasting the url into the body of the text.

 

Insertion d'un media dans un body

And the corresponding rendering

Le media twitter inséré dans le corps du texte

Using Embed URLs with fields

The use of this module with Link fields is even easier.

After you add a Link field to a content type, you simply configure its display mode and select the Embedded URL format.

Format d'affichage Embedded URL

And you just need to enter any supported url in the field.Insertion d'un lien vidéo avec url embed

For the following rendering

 

Une vidéo rendue depuis un champ formaté par URL Embed

Embed URL and Media Entity Suite

The Media Entity suite already includes many extensions to add many media types (image, video, document, etc.) to a structured catalog, as well as remote media such as Twitter, Slideshare, Soundcloud, Spotify, Youtube, Dailymotion, Etc.

URL Embed is a lighter alternative, but also with fewer options, for those who want to easily insert different types of remote media, without wanting to set up an internal media library system. Although in alpha version, the module is quite operational, despite some small bugs on certain types of media or urls (Some providers (Facebook, Twitter) badly rendered in editor and Some URLs are rendered correctly only the first time), and still requires some minor improvements before it can be available in stable version. A module to keep in its favorite module.

 

Ajouter un commentaire