Support in RSS feed?

[johannesholmberg]

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?

[delucis]

How are you rendering your MDX content?

As a general answer, YouTube embeds require JavaScript, which isn’t supported in RSS feeds. I think the closest result you could get would be to render an image which links to YouTube, but I’d need to know more about your set-up to advise further.

[johannesholmberg]

Thanks for getting back.

This is my rss.xml.js:

import rss from '@astrojs/rss'
import MarkdownIt from 'markdown-it'
const parser = new MarkdownIt()
import { getCollection } from 'astro:content'
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'

export async function get(context) {
  const posts = await getCollection('posts')
  return rss({
    title: SITE_TITLE,
    description: SITE_DESCRIPTION,
    site: context.site,
    items: posts.map((post) => ({
      ...post.data,
      link: `/posts/${post.slug}/`,
      content: parser.render(post.body),
    })),
  })
}

I’ve seen feeds which have YouTube embeds and I can watch them directly in my RSS reader.

[delucis]

Ah, ok, so in this case you'd need a way to tell markdown-it how to render the embed.

But first, you'd need to work out what it should generate. Can you share an example RSS feed with an embedded video to see what markup it includes?

[johannesholmberg]

I think this is what we’re looking for:

Source: https://css-irl.info/rss.xml (search for iframe)

[delucis]

OK, so that’s the standard YouTube <iframe> code. That should be possible to generate, but your parser.render() method would need to know how to do that, i.e. find <YouTube id="xtTy5nKay_Y" /> and convert it to:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xtTy5nKay_Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

As far as I can tell that’s a simple mapping of the id to the last part of the URL in src attribute of the <iframe>. I’m not familiar with how markdown-it plugins work, so not sure exactly you’d do the transformation.

[delucis]

Closing this issue as out of scope for this repository. Thanks again for opening @johannesholmberg!