Codepen Embedding

Project
Tags

Check out the codepen module for embedding code samples.

View Codepen Embed Field on Drupal.orgCodepen Embed Field

Looks like it only provides a fields.

 

Mglaman has an article on how to embed codepens:
https://mglaman.dev/blog/adding-codepen-oembeds-your-drupal-site

I got WYSIWYG embeds working by adding Simple Oembed (soembed) and oEmbed Providers modules.

Add a Codepen provider bucket and select CodePen.

Check the option for "Simple oEmbed filter" in your text format.

Also select "Replace in-line URLs" - what does this do?

 

This code is still needed to add the ?format=json to the url.

function HOOK_oembed_resource_url_alter(array &$parsed_url, \Drupal\media\OEmbed\Provider $provider) {
  if ($provider->getName() === 'CodePen') {
    $parsed_url['query']['format'] = 'json';
  }
}

Height can be set in the hook as well.

$parsed_url['query']['height'] = '600';

Max width can be set in the text format settings.

 

What's missing is a way to configure settings like default tab, theme, editable, etc.

https://blog.codepen.io/documentation/embedded-pens/

The editable feature is not available in oembed.

 

I created an issue for the Codepen module to add the hook.

View on Drupal.org #3496793Support WYSIWYG embedding Status: Needs review

 

Url Embed module works out of the box.

View URL Embed on Drupal.orgURL Embed

 

Gutenberg can also handle oEmbed.

View Gutenberg on Drupal.orgGutenberg

 

CKEditor5 Template, CKEditor Templates UI

Can't create a form for variables, but can be used to add wrappers.

 

iFrame module doesn't have a CKE plugin.
View Iframe on Drupal.orgIframe

iFrame Media Video Embed might work for non video iframes.
View Iframe Media Embed Video on Drupal.orgIframe Media Embed Video

 

CKEditor iFrame
View CKEditor iFrame on Drupal.orgCKEditor iFrame

Issue with extra attributes: View on GitLab #3496871Additional attributes get stripped Status: Needs review

 

FitVids might help, says it works with iframes.

View FitVids on Drupal.orgFitVids

Wrapper for a jquery script last updated 9 years ago.

 

CKEditor HTML Embed, kind of like CKEditor 5 Template, but editable html. 
View CKEditor5 HTML Embed on Drupal.orgCKEditor5 HTML Embed

 

Media: Embeddable
View Media: Embeddable on Drupal.orgMedia: Embeddable

Add iframes/scripts/html? as media items.

Works pretty well.

Issue with seeing embed as full width in editor.

 

View Embedded Content on Drupal.orgEmbedded Content.

Insert templated content into CKEditor, with an edit form.

Since it is rendered in code (not stored as html in content), it can be updated programmatically.

To make a template for a Codepen embed, the the plugin could use oembed for the embed attributes.

 

Link iFrame Formatter

View Link iframe formatter on Drupal.orgLink iframe formatter

Field formatter, no wysiwyg.

 

Embera

View Embera on Drupal.orgEmbera

Wrapper for https://github.com/mpratt/Embera

Doesn't seem to provide customization via UI.

 

Additional modules:
View Media oEmbed Provider Markup on Drupal.orgMedia oEmbed Provider Markup

View Lazy-load on Drupal.orgLazy-load

View Extended HTML Filter on Drupal.orgExtended HTML Filter

View iFrame Resizer on Drupal.orgiFrame Resizer

View Embederator on Drupal.orgEmbederator

View Media entity inline frame (media_iframe) on Drupal.orgMedia entity inline frame (media_iframe)

View OEmbed Lazyload on Drupal.orgOEmbed Lazyload

View Media entity inline frame (media_iframe) on Drupal.orgMedia entity inline frame (media_iframe)

View Entity media embed code on Drupal.orgEntity media embed code

 

What I learned:

oEmbed is great for flexibility, but I'm more interested in good integration with Codepen here.

A form to edit parameters would be great.

Media Embeddable provides good customization and reuse, but you have to copy the embed code manually.

Embedded Content would be great, just need to implement a service to retrieve values from oembed, but use the regular embed code for more flexibility. 

CKEditor Media Embed uses external services to handle oembed generically. I think there was a free one that fetched embed codes from oembed on save, but it doesn't seem to be working.

Simple oEmbed doesn't distinguish between links to codepen vs embeds. Can a custom provider be used instead to define a codepen:// url for embeds, or check the /api/oembed path?