gfscott/eleventy-plugin-embed-everything

An Eleventy plugin to easily embed common media formats in posts, using only their URLs

Embed Everything

This is the monorepo for Embed Everything, a collection of Eleventy plugins that allow you to easily embed common media formats in your Markdown using only their URLs.

👉 Need directions for installing or configuring eleventy-plugin-embed-everything? View the README here.

Project packages

Service	Package	Setup instructions
Everything	npm	Readme
Instagram	npm	Readme
SoundCloud	npm	Readme
Spotify	npm	Readme
TED	npm	Readme
TikTok	npm	Readme
Twitch	npm	Readme
Twitter	npm	Readme
Vimeo	npm	Readme
YouTube	npm	Readme

eleventy-plugin-embed-everything's Issues

Add custom title text for the iframe

This is an enhancement request to add the ability to have custom title text on the iframe. Accessibly requirements at my institution encourage adding a title attribute on any iframe for screen readers (see SiteImprove's Guidelines). Not sure how you'd implement it with this plugin but it would be great if possible.

As I assume you know, the normal markdown for an image allows titles for images as such:

![alt text](image url "image Title")

So maybe it could detect a single line with the title quoted after?

https://www.youtube.com/watch?v=TXh1zfd21T8 "iframe title"

Anyways, thanks for this plugin as it's been a great help! If you had the ability to add this it would be really useful.

REQ: Lazy load embedded YouTube videos

You're killing it with these plugins Graham, figured I may as well throw another challenge at you...

Be awesome to have an option for lazy loading of YouTube videos: https://css-tricks.com/lazy-load-embedded-youtube-videos/

Change global settings in front matter

I would like to change the settings I set in .eleventyconfig from the front matter of one specific page.

Example

.eleventyconfig:

…
  embedClass: 'my-alternate-classname'
…

front matter:

---
embedYoutube:
 embedClass: 'my-alternate-classnameeeeeee'
---

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• Update dependency @changesets/cli to v2.26.2
• Update dependency ava to v5.3.1
• Update dependency turbo to v1.10.12
• Update dependency @playwright/test to v1.36.2

Detected dependencies

github-actions

.github/workflows/release.yml

• actions/checkout v3
• pnpm/action-setup v2
• actions/setup-node v3
• changesets/action v1
• actions/checkout v3
• actions/checkout v3
• pnpm/action-setup v2
• actions/setup-node v3

.github/workflows/test.yml

• actions/checkout v3
• pnpm/action-setup v2
• actions/setup-node v3
• actions/checkout v3
• pnpm/action-setup v2
• actions/setup-node v3
• actions/upload-artifact v3
• actions/checkout v3
• pnpm/action-setup v2
• actions/setup-node v3
• codecov/codecov-action v3

npm

demo/package.json

• @11ty/eleventy ^2.0.1

package.json

• @changesets/cli ^2.26.1
• @playwright/test ^1.35.0
• @svitejs/changesets-changelog-github-compact ^1.1.0
• ava ^5.3.0
• nyc ^15.1.0
• turbo ^1.10.3
• pnpm >=7.0.0

packages/everything/package.json

• deepmerge ^4.3.1

packages/instagram/package.json

packages/soundcloud/package.json

• @11ty/eleventy-fetch ^4.0.0

packages/spotify/package.json

packages/ted/package.json

packages/tiktok/package.json

packages/twitch/package.json

• kleur ^4.1.5

packages/twitter/package.json

• @11ty/eleventy-fetch ^4.0.0
• deepmerge ^4.3.1

packages/vimeo/package.json

packages/youtube/package.json

• deepmerge ^4.3.1
• lite-youtube-embed ^0.2.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Import issues from individual project repos to monorepo

There are open issues in the various project repos that should be consolidated in the monorepo now that the migration is finished.

Using the plugin as a filter (working outside .md files)

The plugin works like a charm. Though, I can’t seem to wield it outside actual Markdown (.md) files. In my case, I’m pulling data from my CMS’s API.

How can I use the plugin in a way that it takes a URL string and transform it into its corresponding embed?

I’m thinking it could work like a filter. For example:

{{ "https://www.instagram.com/p/CB-yYetJ4ky/" | embedEverything }}

Does not play well with progressive enhancement

How would you feel about me implementing a slightly more progressively enhanced version of the markup? Here are the changes I’ve made to my own copy of Paul’s files:

1. Make the play button a link to play the video.
2. preventDefault for the play button’s onclick event.

This way it will show the poster and play button by default (during loading) and then transparently upgrade to the web component version async.

REQ: Tweets

Would love to see support to embed tweets.

So pasting any of these URLs:

• https://twitter.com/gfscott/status/1069966554626850816
• https://twitter.com/gfscott/status/1069966554626850816?s=20

Would result in Twitter embed markup:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Hey, I got a sweet new job! Monday was my first day at <a href="https://twitter.com/Shopify?ref_src=twsrc%5Etfw">@Shopify</a>, where I&#39;m going to be working on content strategy in the Apps &amp; Partners ecosystem. There is lots of interesting work to do, and intimidatingly smart people to do it with. It&#39;s going to be good!</p>&mdash; Graham F. Scott (@gfscott) <a href="https://twitter.com/gfscott/status/1069966554626850816?ref_src=twsrc%5Etfw">December 4, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

Note: there are a couple customization options.

Add option to embed chat as well as video

Ideally, I was thinking of adding chat alongside the video stream. My thinking here is to add a chatWindow: false to the pluginDefaults file and use that to show the chat only if it's true to preserve backward compatibility for sites currently using the plugin. There are 2 ways to accomplish this that I can see if we have chatWindow: true:

1. Change buildEmbed to use the Twitch.Embed object passing video-with-chat in the layout parameter. This looks much cleaner and I personally prefer this route but there's a slight chance of breaking backward compatibility going this route. See here: https://dev.twitch.tv/docs/embed/everything

2. Add a second iframe that contains the chat window in buildEmbed. This gives the ability to place it in different locations than the default right-hand side that Twitch streams usually have it and it's guaranteed to preserve backward compatibility. This feels almost like it should be a separate plugin if it goes this route to allow for the most flexibility in placement though. See here:https://dev.twitch.tv/docs/embed/chat

Thoughts/suggestions?

Embed Bandcamp

Bandcamp embeds are pretty old now but still cool to add to blog posts, pages, etc.

Support embedding playlists

Currently we don’t support embedding playlists, but YouTube offers it as an option. Here’s what the embed code looks like:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLv0jwu7G_DFUoByWSHHoSTlUIxY7VkJLi" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Investigate what would be necessary to support playlist embedding.

Embed OpenStreetMap

It would be awesome to add the possibility of embedding OpenStreetMap

Embedded Telegram Posts

Telegram post link looks like https://t.me/FourierNotesRU/65 where FourierNotesRu — channel or profile name 65 — is ID post that you want embed.

script for embed looks like:

<script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-post="FourierNotesRU/65" data-width="100%"></script>

Output html:

<iframe id="telegram-post-FourierNotesRU-65" src="https://t.me/FourierNotesRU/65?embed=1" width="100%" height="" frameborder="0" scrolling="no" style="overflow: hidden; color-scheme: light dark; border: none; min-width: 320px; height: 684px;"></iframe>
<script async="" src="https://telegram.org/js/telegram-widget.js?22" data-telegram-post="FourierNotesRU/65" data-width="100%"></script>

I think you can use Instagram package for creating telegram embed.

P.S. I try to made it, but I'm newbie on GitHub, and I did't make a changes for pull request. It will be cool if you will added contributing guide to this repo.

Thanks

Using not in markdown?

Hey, this project seems super useful. Thank you for making it. I'd love to use it in templates...

Only links visible but not posts

Hi,

I'm using this plugin to embed instagram and yoututbe content in markdown file. Here's my .eleventy.js config file -

const embedEverything = require("eleventy-plugin-embed-everything");

eleventyConfig.addPlugin(embedEverything, {
    use: ['instagram', 'youtube']
});

In the markdown, I'm using -

...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, elit vel condimentum porta, purus.
 
https://www.instagram.com/p/B9XK4J3jVui/
 
https://www.youtube.com/watch?v=XaCrQL_8eMY

...

I just see the text links but no posts. Wondering if someone can help.

Thanks.

Add support for Podcast profiles

Follow-on to gfscott/eleventy-plugin-embed-spotify#1

We added support for embedding individual podcast episodes in v1.1.0, but not for podcasts themselves, which are represented in Spotify URLs as shows (in the same way that albums are made up of tracks).

Spotify’s native embed builder just renders Shows as a podcast player with the latest episode. We could just follow that pattern. Investigate the best way forward!

Url with start time not working properly

I am trying to embed a video with a particular start time, but it doesn't seem to be working

The different links I have tried are
https://youtu.be/EoLs36sGqHI?t=435
https://www.youtube.com/watch?v=EoLs36sGqHI&t=435
https://www.youtube.com/embed/EoLs36sGqHI?start=435

Is there something that I am doing wrong?

Support dynamic data

Unless I'm missing something, this plugin will only work with a hard coded URL in a MD page, right? What if I wanted to support dynamic data? I've got a page that generates projects, projects include a media URL, and I'd like to do something like:

{{ project.mediaUrl | embedEverything }}

Possible?

Feature request: SlideShare support

All my talks historically live on SlideShare and I tend to embed them on my blog for reference.

As I'm moving to 11ty, I'd love to have slide links automatically converted to embeds instead of having to do this manually via iframes.

*-lite

Hey,

Have you thought about giving users option to use lite versions of video embeds?

https://github.com/paulirish/lite-youtube-embed / https://github.com/justinribeiro/lite-youtube
https://github.com/luwes/lite-vimeo-embed

Figure out what to do about twitter.com/x.com URLs

Twitter seems likely to start using x.com for post URLs sometime soon 😑 — need to address this somehow.

Criteria:

• twitter.com URLs should continue to work
• x.com URLs should be recognized
• Unclear at this point if they'll change the embed methodology at all, as well as the platform.twitter.com domain for the embed script. Will have to wait and see on that front.

Embedded video not visible

Hi!
Thank you for this amazing plugin.

I have a question. I already follow every instruction in the README file, but no embedded video, instead only link and the notification "This content is blocked. Contact the site owner to fix the issue."

FYI

• 11ty template that I used.
• Node v10.19.0

Attachment

lite-vimeo-embed implementation

As eleventy-plugin-youtube-embed supports lite-youtube-embed, it would be awesome if this plugin could integrate lite-vimeo-embed in the same way

Better quality thumbnail images

Love this library, thank you so much! ❤️

Currently the thumbnail images are low quality because it's using hqdefault.jpg by default. Example:

YouTube also provides a maxresdefault.jpg image:

Right now as a workaround I have this in my css (I'm using Tailwind):

.eleventy-plugin-youtube-embed > [videoid='dQw4w9WgXcQ'] {
  @apply !bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg')];
}

It can either be the default, or configurable. I don't think all videos have the better quality available so perhaps configurable is a better approach. Ideally on a per video basis. What do you think?

Archive individual project repos and redirect here

Current thought: preserve main branches as-is, set new default branch to show in GitHub, strip that branch back to only a README with relevant links.

Embed Mastodon

It would be awesome if embedding Mastodon posts was supported!

Contributor guide

Create a contributor guide laying out how to add a new service from scratch. Needs to cover:

• Overall plugin architecture and monorepo operations
• Criteria for inclusion — what would we say "no" to, and why? (Currently there are none, just reflects my personal taste)
• Using and testing regular expressions
• Default embed outputs and expectations for configurability
• Documentation requirements
• Maintenance requirements?
• Comment on this issue: what else would you need to know?

(🙌🏻 @dmitriyfourier for the suggestion in #179)

Repeated YouTube videos

Every instance of YouTube embeds across the build renders the same video.

Note how different URLs render the same ID.

---

• Source code: https://github.com/patrulea/eleventy-plugin-embed-everything-test
• Demo: https://eleventy-plugin-embed-everything-test.netlify.app

Embed Ted Talks

Adding the possibility of using this plugin to embed videos from Ted would be great, too!