Src automatically added to video tag
The default video component in GrapesJS is handled differently (without source). In your case, I'd suggest extending the default one and add the support for sources.
Read full answer below ↓Question
Hi @artf,
Thanks for building and maintaining this wonderful package.
Issue I am using Nicepages to build template and upload it to my webapp. I have integrated with Grapesjs, which allows admins to edit the templates easily. The issue that I am facing is Nicepages adds video tag as follows
<video>
<source src="PATH_TO_VIDEO" type="mime/type"/>
</video>
When this template is opened in the Grapesjs, grapesjs adds source to the parent video tag like this
<video src="SOME_SVG_CODE" >
<source src="PATH_TO_VIDEO" type="mime/type"/>
</video>
If you can help me to resolve this issue, that would be great. I am happy to fix it in GrapesJS and make a pull request
Answers (2)
The default video component in GrapesJS is handled differently (without source). In your case, I'd suggest extending the default one and add the support for sources.
Thanks for reporting this, @mshafiq235.
Great suggestion about src automatically added to video tag! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.
Using the event system:
editor.on('component:update', (component) => {
// your logic here
});
Alternative approaches:
- Listen to
selector:addfor CSS selector changes - Use
selector:customfor custom rules - Tap into the
change:*events for fine-grained tracking - Build a plugin that extends the editor with this capability
Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:
- A detailed use case
- Code example showing the desired behavior
- Why this matters for your workflow
The core team is receptive to well-motivated feature requests backed by real use cases.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3145
FEAT: how to edit a button if the button has an action (opening a modal window)?
I have a html template. the html template has a button. when you click on the button, an event occurs (opening a modal window). Is it possi...
Issue #3718
Override Drag functions
Hi @artf I want to override the Drag function of . As, of now we have ability to move freely over the canvas and if move anywhere in the de...
Issue #3371
Generate pages numbers any idea?
Hi, guys I'm creating a doc generator through grapesjs, I'd like to insert page numbers like "Page 1 of 5" at the bottom of each page. My s...
Issue #3157
I want to apply script to rte element which is select html element, on selecting the value for from one select field the dynamic values sho...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.