Why custom youtube video url is not rendered in Video component ?

[sergeynilov]

Working with grapesjs components (jd-dotlogics/laravel-grapesjs 3 plugin) in
laravel 8 app I want to show custom youtube video.
So I imporeted all components from Basic/Extra groups into database and modified cont5ent of video url with valid youtube url :

<div id="inj62" data-gjs-type="video" draggable="true" allowfullscreen="allowfullscreen" class=""> 
    <video src="https://www.youtube.com/watch?v=m3UrMOCREow" class="gjs-no-pointer" controls="" poster="" style="height: 100%; width: 100%;"></video>
</div>

But video does not work and I see error in the console :

Request URL: ```
http://landigator.test/pages/1/%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22100%22%20viewBox=%220%200%2024%2024%22%20style=%22fill:%20rgba(0,0,0,0.15);%20transform:%20scale(0.75)%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d=%22M8.5%2013.5l2.5%203%203.5-4.5%204.5%206H5m16%201V5a2%202%200%200%200-2-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2z%22%3E%3C/path%3E%20%20%20%20%20%20%3C/svg%3E
Referrer Policy: strict-origin-when-cross-origin

In console I see invalid video definition : https://prnt.sc/Cbwl0kdYI_sJ

How can it be salved ?

Thanks!

[ghost]

@sergeynilov did not get your issue, please provide it in more detail with code examples. A video explanation will also help.

[sergeynilov]

I try to detalize it :

1. When I use video component from original Basic group it has some dummy video url in video component source :
   https://prnt.sc/7AXwF6ku5oaK

2. I got the same code, but with valid youtube video url https://www.youtube.com/watch?v=m3UrMOCREow

3. But I still did not get valid video in my component

4. Inserting component with code having valid youtube url:

<div id="inj62" data-gjs-type="video" draggable="true" allowfullscreen="allowfullscreen" class=""> 
    <video src="https://www.youtube.com/watch?v=m3UrMOCREow" class="gjs-no-pointer" controls="" poster="" style="height: 100%; width: 100%;"></video>
</div>

5. But this video does not visible and I have very strange element url source in browser's console : https://prnt.sc/Cbwl0kdYI_sJ

6. Also I want to ask if there is a way to catch event when any element is dropped on the form ? and maybe to modify
   code of this event "on fly" ?

[ghost]

@sergeynilov
1..5: For youtube you need to change the provider to youtube (Ref: https://i.imgur.com/Cxce5Tw.png).
6: You can create a custom plugin (as explained here ) for your custom code and in that plugin, you'll be able to listen to your required events