delucis / astro-embed

Low-JavaScript embed components for Astro websites

Hi, I’m Chris (he/him) 👋

astro-embed's Issues

Regression in link embedding since 0.7.0

I previously used astro-embed-integration for things like YouTube embeds and it was fine.

But after upgrading to 0.7 it has started forcibly turning LinkedIn URLs in .mdx to embeds. Even if I try wrapping the URL in an explicit tag like [The Link](https://linkedin.com/in/somelink), it just ignores that and replaces with an embed.

I removed the package and added astro-embed instead which appears to be the same repository, just not the @astro-community package.

I tried adding the LinkPreview override to astro config like as follows:

import embeds from 'astro-embed/integration';

export default defineConfig({
  integrations: [
    embeds({
      LinkPreview: false
    }),
   //...

but it ignores this too and still hijacks the LinkedIn URLs in markdown files.

The requested module '/node_modules/cssesc/cssesc.js?v=4e7cd4a1' does not provide an export named 'default'

I get this when I used this library.

I think it has to do with an issue with this:
DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "lite-vimeo" has already been used with this registry

Support picking up query string based parameters for MDX integration

A nice to have would be turning MDX strings like this:

https://www.youtube.com/embed/PSGEjv3Tqo0?start=301

into this:

<lite-youtube videoid="PSGEjv3Tqo0" params="start=301">

Obviously the <YouTube /> component can be imported and used with all the params you want, but it would be a nice little bonus!

Twitter Embeds Return 404 from CDN

Embedding tweets fail with a 404 from twitters CDN for valid tweets. Looks like https://cdn.syndication.twimg.com/ doesn't exist.

It has previously been using a deprecated API.

Youtube embed isn't filling it's container like before when played.

Strange occurrence happening.

https://elie.net/blog/magic/3-million-smiles-during-the-pandemic-the-retrospective

The player has started not filling it's container when playing like it was before. It actually works as expected when running locally. Can anyone shed any light on why this might be happening..

Querstion: How can I overview the max-width CSS rule on lite-youtube element?

Unknown file extension ".astro" for /home/dev/astro/node_modules/@astro-community/astro-embed-youtube/YouTube.astro

I can't seem to make this work

Spotify embed

Suggestion to support embeds for Spotify, primarily to make it easy for MD content using the remark plugin.

Support Open Graph embeds

Maybe include a generic embed that consumes Open Graph/og meta-tags similar to how Discord, Twitter etc. do it?

Would be a nice feature to highlight specific links in your content.

bug: @astro-community/astro-embed-twitter - cannot read properties of undefined reading `urls`

Hi
I tried this package and it work most of the times.
For some reason, this tweet <Tweet id="https://twitter.com/addyosmani/status/1600553460180869120" /> URL does not work.
I get the error
Cannot read properties of undefined (reading 'urls')

Notice that this tweet is valid

Error Image Details

Cannot read properties of undefined (reading 'urls')
/node_modules/.pnpm/@[email protected][email protected]/node_modules/@astro-community/astro-embed-twitter/Tweet.astro:79:30
TypeError: Cannot read properties of undefined (reading 'urls')
    at buildContent (/node_modules/.pnpm/@[email protected][email protected]/node_modules/@astro-community/astro-embed-twitter/Tweet.astro:79:30)
    at eval (/node_modules/.pnpm/@[email protected][email protected]/node_modules/@astro-community/astro-embed-twitter/Tweet.astro:148:7)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Module.renderToString (/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/runtime/server/render/astro.js:66:21)
    at async renderJSX (/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/runtime/server/jsx.js:49:53)
    at async Promise.all (index 1)
    at async renderJSX (/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/runtime/server/jsx.js:28:10)
    at async renderElement (/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/runtime/server/jsx.js:152:133)
    at async renderJSX (/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/runtime/server/jsx.js:54:53)
    at async Promise.all (index 1)

I think the solution to this is to check if entities exists first because its hard to trust Twitter API types in the tests that I run playing with this API myself.

https://github.com/astro-community/astro-embed/blob/main/packages/astro-embed-twitter/Tweet.astro#L87

like that if (tweet.data.entities?.urls) {

Build fails: Rollup failed to resolve import "linkedom"

I updated to version 0.7.0 and now the build of my site fails with the following error: Rollup failed to resolve import "linkedom".
The dev server with pnpm dev still works fine.

I looked up the error and couldn't find a solution. My project is at https://github.com/bennihtm/astro-blog and the PR that broke stuff is here.

> astro build

13:35:40 [vite] Re-optimizing dependencies because lockfile has changed
13:35:42 [build] output: "static"
13:35:42 [build] directory: C:\Users\Benni\Documents\astro-blog\dist\
13:35:42 [build] Collecting build info...
13:35:42 [build] ✓ Completed in 2.98s.
13:35:42 [build] Building static entrypoints...
13:35:48 [ERROR] [vite] x Build failed in 5.66s
13:35:48 [astro-icon] Loaded icons from src/icons
[vite]: Rollup failed to resolve import "linkedom" from "C:/Users/Benni/Documents/astro-blog/node_modules/.pnpm/@[email protected]/node_modules/@astro-community/astro-embed-utils/index.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
  Stack trace:
    at viteWarn (file:///C:/Users/Benni/Documents/astro-blog/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-C-KAszbv.js:67432:27)
    at onwarn (file:///C:/Users/Benni/Documents/astro-blog/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-C-KAszbv.js:67164:13)
    at Object.logger [as onLog] (file:///C:/Users/Benni/Documents/astro-blog/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19983:9)
    at file:///C:/Users/Benni/Documents/astro-blog/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18883:26
 ELIFECYCLE  Command failed with exit code 1.

Support for Astro v2 betas

I'm getting peer conflicts when building using Astro v2.0.0-beta.3 due to the ^1.0.0 peer dependency.

When I use --force though, the embeds seem to work!

request: support for instagram

Here is an instagram embed example

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/B6d0pz4DAx1/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/B6d0pz4DAx1/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/B6d0pz4DAx1/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by TechSquidTV (@techsquidtv)</a></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>

It would be a little while but I may loop back around and contribute.

Random CLS in Firefox when playing the video

Nice component! fyi, I've noticed an oddity in Firefox (121.0.1): The page position sometimes will jump down the page when activating play on the video. (Almost seems like it's jumping to an anchor.) What's interesting is that It doesn't always exhibit this behavior, only randomly. I don't see this CLS issue in Edge or Chrome. Haven't been able to figure out what's causing it, but thought I would mention it -- in case it comes up from other users. Thanks!

Issue: Autoplay not working in param

I try to use the autoplay=1 params but it doesn't work appropriately.

<YouTube class=" mx-auto max-w-full" params="autoplay=1 id="https://www.youtube.com/watch?v=abc" />

Add Mastodon embed support/demo

Would be great to support Mastodon embeds in addition to Twitter

MDX support for integration-package?

With Astro Flavored Markdown (AFM) deprecated and removed in Astro v2 in favor of MDX, what's the future for the remark plugin?

Can we support MDX to keep the easy URL-based auto import working? Or provide instructions for how to do it?

How about an embed for Rumble?

Rumble is the biggest competitor for Youtube.

Astro v2

Pls give support for Astro v2

Astro v2 has been released. This integration need to be updated to add this support.

one of the error when npm upgrade & related

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\joelr\AppData\Local\npm-cache\_logs\2023-02-05T13_49_03_268Z-debug-0.log
PS W:\starring codes\Astro Projects\perkedel-astro> npm remove astro-github-stats
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/astro
npm ERR!   peer astro@"^1.0.0 || ^2.0.0-beta" from @astro-community/[email protected]
npm ERR!   node_modules/@astro-community/astro-embed-vimeo
npm ERR!     @astro-community/astro-embed-vimeo@"^0.1.0" from [email protected]
npm ERR!     node_modules/astro-embed
npm ERR!       astro-embed@"^0.1.3" from the root project
npm ERR!     @astro-community/astro-embed-vimeo@"^0.1.0" from @astro-community/[email protected]
npm ERR!     node_modules/astro-embed/node_modules/@astro-community/astro-embed-integration
npm ERR!       @astro-community/astro-embed-integration@"^0.1.2" from [email protected]
npm ERR!       node_modules/astro-embed
npm ERR!         astro-embed@"^0.1.3" from the root project
npm ERR!   peer astro@"^1.0.0 || ^2.0.0-beta" from @astro-community/[email protected]
npm ERR!   node_modules/@astro-community/astro-embed-youtube
npm ERR!     @astro-community/astro-embed-youtube@"^0.2.0" from [email protected]
npm ERR!     node_modules/astro-embed
npm ERR!       astro-embed@"^0.1.3" from the root project
npm ERR!     @astro-community/astro-embed-youtube@"^0.2.0" from @astro-community/[email protected]
npm ERR!     node_modules/astro-embed/node_modules/@astro-community/astro-embed-integration
npm ERR!       @astro-community/astro-embed-integration@"^0.1.2" from [email protected]
npm ERR!       node_modules/astro-embed
npm ERR!         astro-embed@"^0.1.3" from the root project
npm ERR!   2 more (@astrojs/markdown-remark, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer astro@"^1.0.0-beta.10" from [email protected]
npm ERR! node_modules/astro-embed
npm ERR!   astro-embed@"^0.1.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/astro
npm ERR!   peer astro@"^1.0.0-beta.10" from [email protected]
npm ERR!   node_modules/astro-embed
npm ERR!     astro-embed@"^0.1.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\joelr\AppData\Local\npm-cache\eresolve-report.txt for a full report.

Gist embed

Suggestion to support embeds for GitHub gists, incl. auto-import using the remark plugin.

[BUG] The requested module '@astrojs/markdown-remark' does not provide an export named 'DEFAULT_REHYPE_PLUGINS'

1:30:09 PM: 11:30:09 AM [vite] Error when evaluating SSR module /opt/build/repo/astro.config.mjs: failed to import astro-embed/integration
1:30:09 PM: |- file:///opt/build/repo/node_modules/@astro-community/astro-embed-integration/index.js:2
1:30:09 PM: 	DEFAULT_REHYPE_PLUGINS,
1:30:09 PM: 	^^^^^^^^^^^^^^^^^^^^^^
1:30:09 PM: SyntaxError: The requested module '@astrojs/markdown-remark' does not provide an export named 'DEFAULT_REHYPE_PLUGINS'
1:30:09 PM:     at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
1:30:09 PM:     at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
1:30:09 PM:     at async Promise.all (index 0)
1:30:09 PM:     at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
1:30:09 PM:     at async nodeImport (file:///opt/build/repo/node_modules/vite/dist/node/chunks/dep-abb4f102.js:55920:17)
1:30:09 PM:     at async ssrImport (file:///opt/build/repo/node_modules/vite/dist/node/chunks/dep-abb4f102.js:55813:24)
1:30:09 PM:     at async eval (/opt/build/repo/astro.config.mjs:6:31)
1:30:09 PM:     at async instantiateModule (file:///opt/build/repo/node_modules/vite/dist/node/chunks/dep-abb4f102.js:55875:9)

My astro.config.mjs:

import { defineConfig } from 'astro/config';
import image from "@astrojs/image";
import NetlifyCMS from 'astro-netlify-cms';
import embeds from 'astro-embed/integration';

// https://astro.build/config
export default defineConfig({
  integrations: [NetlifyCMS({...}), image({
    serviceEntryPoint: '@astrojs/image/sharp'
  }), embeds()],
  legacy: {
    astroFlavoredMarkdown: true,
  },
  site: `https://example.com/`,
  output: 'static'
});

My package.json:

{
  "name": "@example/web",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "functions": "cd functions/app && yarn install"
  },
  "devDependencies": {
    "@astrojs/image": "^0.17.2",
    "astro": "^2.8.2"
  },
  "dependencies": {
    "astro-embed": "^0.2.1",
    "astro-netlify-cms": "^0.5.3"
  }
}

FR: Support Bandcamp embeds

I'm not sure whether it's possible to programmatically generate Bandcamp iframes, they have quite a few options...

Maybe it's not worth building out, but I'd be interested in an option for that.

Ex:

<iframe style="border: 0; width: 100%; height: 120px;" 
	src="https://bandcamp.com/EmbeddedPlayer/album=1188525573/
	size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/" seamless>
	<a href="https://droeloe.bandcamp.com/album/the-art-of-change">The Art of Change by DROELOE</a>
</iframe>

Add support for Astro v3

I've just forced it with npm install --force and it worked just fine, so adding support shouldn't be trivial

Blank `<p>` added between "Tweet" embeds

When multiple Twitter links appear in an MDX file, there is a blank <p> tag between them, which can create awkward gaps on the page when markdown is styled.

Minimal Reproduction:

https://codesandbox.io/p/sandbox/astro-embed-tweets-extra-p-issue-4z4zq3?file=%2Fsrc%2Fpages%2Findex.mdx%3A1%2C1

Notice how there is a large gap between the two tweets, but the gap is not present between YouTube embeds.

2x Tweets markup (each item is prefaced by a blank <p><astro-embed-tweet></p> and followed by a blank <p></p>:

2x YouTube markup (each item is in a single <p>:

I would like the Tweet embed to behave similar to the YouTube one, so it just lives under a single element for consistent spacing.

Twitter embed option is using an unsupported API

It looks like this component is making use of an unsupported Twitter endpoint.

	return await safeGet(`https://cdn.syndication.twimg.com/tweet?id=${id}`);

Worth noting that this may change or become inaccessible at any time, so I'd encourage either using the Twitter embedded JavaScript widgets (publish.twitter.com), or a server-side option that uses the latest Twitter API v2.

Astro Embed Not Working with Astro v3.0

The astro embed does not render on the browser for YouTube components. The component is inserted in the dom correctly, but no content appears.

This is for both URL embeds and components.

Versions:
"astro": "^3.0.2",
"astro-embed": "^0.5.1",

Production Instance:
https://www.1sync.co/build-salesforce-deployment-pipeline-with-github-actions
(At the bottom, search "YouTube")

Support in RSS feed?

I’ve noticed that when using the @astrojs/rss package to generate a feed, the youtube embed comes out as raw text and is not converted to an iframe. Any way to get some support on getting this to work?

Markdown embeds for 'astro-embed/integration' don't work

The README has a section here that says isolated links in markdown files can be automatically converted into embeds.

However, as described here, this feature doesn't seem to work.

I did find a workaround by using a remark plugin, but at the suggestion of @delucis I'm opening this issue since this seems to be a bug in the integration (and because if it's fixed, I'm curious to see how it compares to the remark plugin alternative).

Hi Youtube embed doesn't work

Hello,

I tried the demo. It doesn't work for me.
Unknown file extension ".astro" for /Users/hanymorcos/projects/astro/node_modules/@astro-community/astro-embed-youtube/YouTube.astro

I get this error initially.
Hint:
You likely need to add this package to vite.ssr.noExternal in your astro config file.
Stacktrace:

I added the needed changes.
The Youtube and Tweet don't render in md files. It doesn't work.

thanks,

Hany

@astro-community/astro-embed-vimeo package doesn't list the dependency of @astro-community/astro-embed-utils

The astro embed Vimeo package has a dependency to astro-embed-utils.

The dependency is imported in packages/astro-embed-vimeo/Vimeo.astro

---
import { safeGet } from '@astro-community/astro-embed-utils';
import urlMatcher from './matcher';

The dependency is missing in the package.json.

Similar to this the astro-embed-link-preview (package.json) or astro-embed-twitter (package.json) has this dependency declared.

  "dependencies": {
    "@astro-community/astro-embed-utils": "^0.1.1"
  }

Note: maybe the version should also set to "^0.1.2"

Fix: Astro v4 compatibility

Hi! I've just attempted to update my project to Astro v4 (just released) and peer deps from this module are not allowing me to do a clean install.

Any input would be appreciated!

The player is over the thumbnail with YouTube

Describe the Bug

I'm using astro-embed with Starlight. When I click to play video, the player will be over the thumbnail.

Link to Minimal Reproducible Example

https://github.com/AREA44/starlight-tailwind-template/tree/71b3e7a57568f8be1b871f07637e2585011a7f25

Could not find a declaration file for module

Have this alert when using:

import { YouTube } from '@astro-community/astro-embed-youtube';

Could not find a declaration file for module '@astro-community/astro-embed-youtube'. '/Users/xxxx/Astro/xxxx/node_modules/@astro-community/astro-embed-youtube/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/astro-community__astro-embed-youtubeif it exists or add a new declaration (.d.ts) file containingdeclare module '@astro-community/astro-embed-youtube';`ts(7016)

Lighthouse: Links are not crawlable with `<YouTube>`

Introduced by #102

The play button is now an <a> elements that has its href attribute removed thereby creating the following issues with Lighthouse scores:

Links are not crawlable

Search engines may use href attributes on links to crawl websites. Ensure that the href attribute of anchor elements links to an appropriate destination, so more pages of the site can be discovered. Learn how to make links crawlable

support tiktok video embed