Using OEmbed in Base HTML for Seamless Content Integration

OEmbed is a great way to embed content from other websites into your own HTML, and it's surprisingly easy to use. OEmbed supports a wide range of content types, including videos, images, and even code snippets.

To get started with OEmbed in Base HTML, you'll need to include the OEmbed script in your HTML file, which can be done by adding a single line of code to your HTML header. This will allow you to use the oembed element in your HTML.

The oembed element is the key to seamless content integration, and it's used to embed content from other websites into your own HTML. Simply wrap the URL of the content you want to embed in an oembed element, and the OEmbed script will take care of the rest.

Broaden your view: Html in Script Tag

OEmbed is a PHP library that helps retrieve and display embed media from various media providers that support OEmbed data format.

If this caught your attention, see: Html Tags for Social Media Icons

The library supports websites like YouTube, Vimeo, Twitter, and Imgur, among others.

It also comes with support for direct mp4/video sources and some media providers that don't use OEmbed.

You can use OEmbed as a standalone library, or it can be used as the default embed finder in Wagtail.

Wagtail has a built-in list of OEmbed providers, which are enabled by default and can be found on GitHub.

You might like: Html Component Library

To configure embeds, you'll need to understand how embed finders work. Embed finders are modules within Wagtail responsible for producing embed code from a URL.

The WAGTAILEMBEDS_FINDERS setting is a list of finder configurations that are run in order until one successfully returns an embed. The default configuration is a list of finder configurations.

This means you can customize the embed finders to suit your needs by modifying the WAGTAILEMBEDS_FINDERS setting.

The {%embed%} tag is a powerful tool for adding media to your templates. It allows you to nest embeds into a template by passing the URL and an optional max_width argument to the tag.

The max_width argument is sent to the provider when fetching the embed code, which can affect the width of the embed.

You can use the max_width argument to control the width of images and videos only.

Configuring embed "finders" is a crucial step in setting up Wagtail embeds. Embed finders are the modules within Wagtail that produce embed code from a URL.

The WAGTAILEMBEDS_FINDERS setting is used to configure embed finders, which is a list of finder configurations that are run in order until one successfully returns an embed.

The default configuration is a simple text-based finder, but you can customize it to suit your needs. You can find the default embed finder configuration in the Wagtail documentation.

The default embed finder fetches the embed code directly from the content provider using the oEmbed protocol. It has a built-in list of providers that are all enabled by default, and you can find this list on GitHub.

You can limit which providers may be used by specifying the list of providers in the finder configuration. For example, you can only allow content to be nested from Vimeo and YouTube, and add a custom provider.

If multiple providers can handle a URL, Wagtail will choose the topmost finder to perform the request and not try to run any other finder. This means you need to make sure the topmost finder is the one that will return the correct embed code.

Consider reading: Html Select Default

Customizing OEmbed can be a bit tricky, but don't worry, it's not as hard as it seems. The PHP library for OEmbed comes with support for direct mp4/video sources, which is a big plus.

To customize OEmbed, you need to know that it also supports media providers that don't use OEmbed, like some of the ones mentioned in the article.

Wagtail's default rich text editor has a "media" icon that allows embeds to be placed into rich text.

To enable this feature, you don't have to do anything except ensure the rich text field's content is being passed through the |richtext filter in the template.

This filter is what calls the embeds module to fetch and nest the embed code, making it work seamlessly with your rich text editor.

If this caught your attention, see: Html Filter

You can limit which providers may be used by specifying the list of providers in the finder configuration. This is useful if you want to restrict which platforms your editors can embed content from.

The default provider list is available at https://github.com/wagtail/wagtail/blob/master/wagtail/embeds/oembed_providers.py. You can also customize this list by specifying the providers you want to use in the finder configuration.

For example, you can allow content to be nested from Vimeo and YouTube, and add a custom provider. If multiple providers can handle a URL, the topmost finder is chosen to perform the request. Wagtail will not try to run any other finder, even if the chosen one didn’t return an embed.

To add a new provider, you can follow the example of adding a DeviantArt provider. You'll need to use the OEmbedProviderBase and the base.GetJsonResponse method to fetch the embed code from the provider's API.