How to Tag Code when placed inside a CMS Rich Text field

I added a Custom Video Code (HTML Embed) inside a CMS Rich Text, to create a CMS-feed like this:

I have a second custom code inside page-body, which identifies this HTML embed under the tag-name „.embed-video“.

So now i am wondering how to rename my HTML embed (into „.embed-video“) when it‘s placed inside the Rich Text Feld of my CMS collection…? There is no direct tagging option.

I tried tagging the whole Rich Text field as „.embed-video“…but that doesn’t seem to work :sweat_smile:

Thanks for sharing your experience on this :pray:

Here is my public share link: LINK

An embed renders as a DIV, with your embed content inside of it.

You don’t need to add your attribute or classes to the embed element, you can put them on a DIV inside of the Embed, wrapping your content.

It’s an extra DIV, but this approach will give your CMS-stored content essentially the same structure for your JS.

Thank you for explaining @memetican !

It would be a massive help for me to understand how the div is wrapping the embed code as i have no idea about coding

  • will it be something like this:

div open
Class= “.embedvideo“
div open
#paste-my-custom-code here#
/div close
/div close

Or this?

div open
Class= “.embedvideo“
#paste-my-custom-code here#
/div close

Both doesn’t seem to work in the preview so it might be something completely different :smile:

Thanks for leading me into the right direction !!

Custom JS would never run in the designer, only on the published site. I’m not certain what you’ve built, but that might be why you’re not seeing what you expect.

It would be best to use your browser’s devtools and look at the actual element to know what’s being generated. But from memory it’s something like-

DIV - .w-richtext
  DIV - .w-embed
    DIV - .embedvideo
      ( your custom code here ) 

Those two inner items are the things you’d put in your embed, e.g.

<div class="embedvideo">
   ... your code ...

But you should check your actual HTML output to know for certain.

1 Like