search

mjawad096 / laravel-grapesjs

This package provide an esay way to integrate GrapesJS into your laravel proejct.
MIT License
107 stars 54 forks source link

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

Closed sergeynilov closed 1 year ago

sergeynilov commented 2 years ago

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 commented 2 years ago

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

sergeynilov commented 2 years ago

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 commented 1 year ago

@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