How to add video block on blockManager
@himanshubudhlakoti You can use https://github.com/artf/grapesjs-blocks-basic as a plugin. It has pre built blocks. Documentation is pretty straight forward on this.
Read full answer below ↓Question
Hello All.
i want to add a video block on blockmanager same as mentioned on below snapshot

i am using following code for adding video block on block manager
editor = grapesjs.init({
autorender: 0,
container: '#gjs',
components: '<div class="txt-red"></div>',
style: '.txt-red{color: red}',
blockManager: {
appendTo: '#gjs',
blocks: [
{
id: 'Video',
label: 'Video',
attributes: { class:'fa fa-video'},
content: `
<video controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/ogg">
Your video
</video>`,
category: 'Basic',
},
]
})```
but that code does not works
please let me know how can i add video block on block manager
Answers (3)
@himanshubudhlakoti You can use https://github.com/artf/grapesjs-blocks-basic as a plugin. It has pre built blocks. Documentation is pretty straight forward on this.
thnak you @yomeshgupta it has done
@himanshubudhlakoti You are welcome! Close this issue if it is resolved.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1510
How to add 2 columns at blockmanager in grapesjs
Hello I am new in grapejs and using grapejs with angular6 i have seen Demo of grapesjs on []( https://grapesjs.com/demo.html). i want to cr...
Issue #1539
How and where to define form's action in grapesjs
Hello All, how can i get data from forms in grapesjs. i have droped a form on canvas as u can see that below . so there is an action proper...
Issue #1294
How to add category for default block manager?
@artf I want put all default blocks to category named "Basic". But I can't find any documents about it. I use editor.BlockManager.getAll()....
Issue #987
[BUG/Question] Dropdown indicator not displayed for a custom trait
Hello, the dropdown (select) element arrow indicator icon is not rendered when adding a custom trait to a component: I'm using following co...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.