Help with video block

[xwurg]

Dear all,

I'm trying to append a video block via block manager. Here's the code:

{ id: 'video', label: 'Video', category: 'Basic', media: svgVideo, activate: true, content: { type: 'video', attributes: {class:'video'}, } },

When i drop a block in the editor, it is enclosed in a div:

<div id="i3iy" data-gjs-type="video" draggable="true" allowfullscreen="allowfullscreen" autoplay="autoplay" loop="loop" controls="controls" src="http://localhost:8888/medias/2023/01/solene-perrin-accueil.mp4" class="video gjs-selected"><video src="http://localhost:8888/medias/2023/01/solene-perrin-accueil.mp4" class="gjs-no-pointer" poster="" style="height: 100%; width: 100%;" autoplay="" loop=""></video></div>

Everything seems to work fine except when i play with the component settings. They are not retrieved correctly:

Results in this:

However, the video is saved after calling getHtml() as such :

<video allowfullscreen="allowfullscreen" src="http://localhost:8888/medias/2023/01/solene-perrin-accueil.mp4" loop="loop" autoplay="autoplay" controls="controls" class="video">

I can't seem to figure out how to fix the issue. Thanks in advance for your kind help. I've found a similar issue advising to use a plugin, but I'm trying to do it without it. Many thanks in advance.

[artf]

Hi @xwurg are you able to provide a demo of your issue as I'm not able to reproduce it with video settings (I see the HTML properly updating on settings change)

[xwurg]

Sure @artf, how would you like me to show it to you? Also, i modified the code of GrapesJS to make it work... I'm quite new to GitHub so no idea how to help besides attaching a file. Here the mdified version that works.

changetovideocomponent.txt

=> This solved the issue of the video attributes - such as autoplay, muted, etc - not being properly transfered from the grapesjs-container div to the actual video tag when using getHtml().

[artf]

It's not clear what you have changed there but I'm not even sure where is the problem as I'm not able to reproduce any issue. Are you using the latest version? Try to create a reproducible demo by using something like https://jsfiddle.net/szLp8h4n