Issue when adding video block manually
The style you see on <video> is only applied in canvas, your styles are applied to the wrapper and you should see them correctly applied in the export code
Read full answer below ↓Question
I added Video Block manually like this.
<pre>
blockManager.add('video', {
label: 'Video',
category: 'Media',
attributes: {class: 'fa fa-youtube-play'},
content: {
type: 'video',
classes: ['website-media', 'website-video'],
//traits: ['data-panoramic'],
resizable: 0,
draggable: '.website-cell, .website-block, .video-container, .media-container',
style: {
width: '100%',
height: 'auto'
}
},
});
</pre>
It seems this produce this element when I drop the video block to editor.
`<div class="website-media website-video" data-gjs-type="video" onmousedown="return false">`
` <video src="" class="gjs-no-pointer" style="height: 100%; width: 100%;"></video>`
`</div>`
**But the height of video element is different every time when I add several video blocks,**Answers (2)
The style you see on <video> is only applied in canvas, your styles are applied to the wrapper and you should see them correctly applied in the export code
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1584
Not getting the Script of Block from editor.getComponents()
Below is the Component that I'm adding. this.editor.BlockManager.add('dob-mmyy-pii', { id: 'dob-mmyy', label: DOB (MM, YYYY) (PII), categor...
Issue #1471
[Question] Blockmanager and Image
Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-...
Issue #1134
Add custom style in the style-sheet for a new class of existing block.
Hello @artf _("map") && i.add("map", { label: n.labelMap, category: n.category, attributes: { class: "fa fa-map-o" }, content: { type: "map...
Issue #1624
replace html issue
I defined new forum block like this. I want to replace resource class with ajax response html. Currently I did it like this. The problem is...
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.