Cannot configure a video block with src=null
Hi, If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/ We specialise on GrapesJS.
Read full answer below ↓Question
Description
- The bug is reproduced on the current demo
What happens ?
I configured my video block with src=null like this :
class Video {
constructor(editor) {
let block = editor.BlockManager.get('video'); //Inherit from plugin
editor.BlockManager.remove(block.id);
return {
content: {
...block.attributes.content,
src: null,
style: {
width: '250px',
height: '150px',
},
},
label: `<div class="callout-icon callout-icon-video"></div>
<div class="callout-block-label">Video</div>`,
category: 'Extra',
attributes: {
class: 'fa',
'data-type': 'video',
},
};
}
}
When i drag the block i get on the generated html an base64 image on the src attribute like this :
<video allowfullscreen="allowfullscreen" id="imm4" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+" controls="controls"></video>
Expected behavior
- I want to set a block without predefined src and give the user the ability to set the src via the trait .
Steps to reproduce on the demo
- Open the import popup and paste this and click import
<video allowfullscreen="allowfullscreen" id="imm4" controls="controls"></video>
- Reopen the import popup and you will see that the src attribute is set with the base64 image .
<video allowfullscreen="allowfullscreen" id="imm4" controls="controls" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+">
</video>
<style>* {
box-sizing: border-box;
}
body {
margin: 0;
}
*{
box-sizing:border-box;
}
body{
margin:0;
}
@keyframes fadeEffect{
from{
opacity:0;
}
to{
opacity:1;
}
}
</style>
The conclusions of my research
It seems to be a collision between the video and the image component , because the base64 image is the fallback image for the image component .
Answers (3)
Hi,
If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/
We specialise on GrapesJS.
@meyerco pass an empty fallback: '' property also
To be more precise , the bug is about loading an html that contain a video tag without src attribute .
After loading this html , an scr attribute is added to video tag . This src value is a base64 image (obviously the default base64 image for the image component) .
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2802
[BUG] editor get stucked when switching selection quickly between controls
DescriptionThe bug is reproduced on the current demo What happens ? When switching selection quickly between controls , the editor get stuc...
Issue #3806
Target :null when adding video
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome new version Reproducible demo link...
Issue #2800
[Bug] when removing a tooltip its css is not removed
DescriptionThe bug is reproduced on the current demo Expected behavior When a tooltip is removed its css is removed What happens instead ?...
Issue #2156
Cannot change existing block's icon
Hi all, great JS plugin btw! Im new to programming and i would like to know a few things: I want to set the icon as a "heading" icon from f...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.