gfscott/eleventy-plugin-youtube-embed

An Eleventy plugin to automatically embed YouTube videos in posts

eleventy-plugin-youtube-embed's Issues

Use lite-youtube-embed

lite-youtube-embed is an awesome npm package that makes YouTube embeds way faster and more privacy respectful.

It would be lovely if the embed generated by this plugin could be generated through it.

Add option for "?rel=0" on url to only recommend my videos

Thanks for the tool!

I'm using this top play movies from a YouTube channel. When the vid is finished playing or paused, they (YouTube) recommends junk I don't wanna show. If I add ?rel=0 to the embed url then YouTube will recommend videos from my channel first.

This:

to this:

I tested it out by adding this line of code:

Here's a link to google docs:
https://developers.google.com/youtube/player_parameters#rel

Support The Paul Irish Lite YouTube Embed™

https://github.com/paulirish/lite-youtube-embed

Figure out the right approach to the `allow` attribute

YouTube has recently expanded the values it includes in the allow attribute on the embed’s iframe element. Here’s what gets included by default:

allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

Investigate how to properly support allow.

Error deploying : lite-yt-embed.css missing

Error: ENOENT: no such file or directory, open '/vercel/path2/node_modules/eleventy-plugin-youtube-embed/node_modules/lite-youtube-embed/src/lite-yt-embed.css'

Deploying from Vercel with both 1.5 and 1.6.1

Add an option to inline the Lite YouTube Embed css & js

The css and Js for the Lite YouTube Embed are both small enough to inline it.
This removes the css from from being render blocking.

Doesn't Seem to Render on My Install - just spits out the link as text

I only know enough to be dangerous here so I'm sorry if I don't pass along enough info to help out.

Blog post code:

Blog post output:

Eleventy.js code:

Node Modules directory:

If there's anything else you'd need to see to help figure out the issue, I'm happy to send it over! (and no panic / rush. Just a personal blog. Thanks for the plugin!)

Add TITLE attribute for accessibility and Lighthouse

Per Accessibility Concerns:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Accessibility_concerns

And Lighthouse dings it for not having a "title" attribute.

Tried it, but didn't work

Your plugin sounds great, but I couldn't get it to work. My Markdown parser produced the following HTML, so you may immediately see what the problem was (i.e., maybe it's because it's not on the same line as the <p> and the </p> tags):

<p>
    www.youtube.com/watch?v=u8pCsfT1gDU
</p>

And I had also tried it with https: in front. Either way, it only kept getting changed into just a link without the embed occurring.

Build failed in Travis CI. (Works fine on desktop)

TravisCI throws the following error when it tries to build:

`SyntaxError` was thrown:
    SyntaxError: Invalid regular expression: /<p>(\s*)(<a(.*)>)?(\s*)(https?:\/\/)?(w{3}\.)?(youtube\.com|youtu\.be)\/(watch\?v=|embed\/)?(?<videoId>[A-Za-z0-9-_]{11})(\S*)(\s*)(<\/a>)?(\s*)<\/p>/: Invalid group
        at extractVideoId (/home/travis/build/jmschrack/jmschrack.github.io/node_modules/eleventy-plugin-youtube-embed/.eleventy.js:35:25)
        at /home/travis/build/jmschrack/jmschrack.github.io/node_modules/eleventy-plugin-youtube-embed/.eleventy.js:20:21
        at Array.forEach (<anonymous>)
        at Template.eleventyConfig.addTransform (/home/travis/build/jmschrack/jmschrack.github.io/node_modules/eleventy-plugin-youtube-embed/.eleventy.js:19:13)
        at Template.runTransforms (/home/travis/build/jmschrack/jmschrack.github.io/node_modules/@11ty/eleventy/src/Template.js:387:29)
        at Template.renderPageEntry (/home/travis/build/jmschrack/jmschrack.github.io/node_modules/@11ty/eleventy/src/Template.js:539:28)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:189:7)

However, running eleventy locally works fine with no issues.

Create option to use the “nocookie” domain

Currently the plugin uses the standard youtube.com domain for the embed. Make the domain a configurable option, using youtube-nocookie.com by default.

Support other video services besides YouTube

Investigate how best to support other video platforms.

Might be better to keep each plugin to a single-service, and then package them together?

Investigate offering “lite-youtube-embed” as an option

Currently the plugin uses the standard YouTube iframe to embed. Investigate the lite-youtube-embed custom element implementation as an option.

Requires loading CSS and Javascript — consider how to manage this while maintaining the plugin's minimal configuration requirements.

Add embed class and ID

Currently the embed is basically impossible to target with CSS. Each instance should have:

• A unique id value, perhaps the youtube video ID
• A common class, so all instances can be styled consistently