Adding CodePen oEmbeds to your Drupal site

I feel that whenever I attempt something with code, nothing ever just works. There’s some bug or some roadblock that has to be overcome. Apparently, that is the case with embedding CodePen.io!

Drupal 8.6.0 added oEmbed support for media! Out of the box, only remote video providers Vimeo and YouTube are supported. But a quick hook implementation exposes more providers. The providers are based on a repository provided by the oEmbed website. The repository is here: https://oembed.com/providers.json

So I tried to add CodePen. Here’s my snippet of code that I added to my module so that it would be available as a source for my media type:

/**
 * Implements hook_media_source_info_alter().
 */
function mglaman_dev_media_source_info_alter(array &$sources) {
  $sources['oembed:codepen'] = [
    'id' => 'codepen',
    'label' => new TranslatableMarkup('CodePen'),
    'description' => new TranslatableMarkup('Embed a CodePen.'),
    'allowed_field_types' => ['string'],
    'default_thumbnail_filename' => 'no-thumbnail.png',
    'providers' => ['Codepen'],
    'class' => 'Drupal\media\Plugin\media\Source\OEmbed',
    'forms' => [
      'media_library_add' => OEmbedForm::class
    ],
    'provider' => 'mglaman_dev',
  ];
}

Great, off to the races! Naaaaaah. Not so much. I kept getting errors that the URL was invalid and a resource couldn’t be fetched. So, I popped on Xdebug to see what was going on.