Video embedding feature is not working as expected

[Mo-Tarifi]

Describe the bug
The video embedding feature (#672) is not working as expected. I'm not able to play the video inside the editor.

To Reproduce
In react
const editor = useCreateBlockNote({ initialContent: [ { "id": "703d3f74-05f8-47a3-8eb8-a75fc13c3901", "type": "video", "props": { "backgroundColor": "default", "textAlignment": "left", "name": "watch?v=t-lhgq7Nfpc", "url": "https://www.youtube.com/watch?v=bgPuPSPZe2U", "caption": "", "showPreview": true, "previewWidth": 512 }, "children": [] }, { "id": "70450317-8167-4e13-ae77-de3558b59e12", "type": "paragraph", "props": { "textColor": "default", "backgroundColor": "default", "textAlignment": "left" }, "content": [], "children": [] } ], });

I would appreciate if you could look into this sooner than later.

[thedevangvishnu]

Even I wanted to point the same issue. This is the case with audio block as well. There seems to be some kind of error (in loading the media), when it is embedded using the URL. These audio and video blocks work fine when the media is directly uploaded, but not when the URL is provided.

I investigated and found that there seems to be some error in loading the media when it is being embedded using the url. I found this by using "onerror" event on video/audio element. I'm sure the issue lies there only. Not sure about the solution though. Working on it!

[matthewlipski]

Thanks for reporting this! Just want to ask if you guys are running into this issue specifically with YouTube links or others too (try https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm for example). YouTube is quite annoying as it doesn't let you embed videos in a video element, they want you to specifically use an iframe which has the YouTube playback UI as well. So this is a known issue for YT links, just wondering if you've seen the same behaviour from other websites too.

[thedevangvishnu]

I just checked, the url embedding is not working for other websites too. Tried embedding url for songs from platforms like Spotify, Wynk and none of them are working.
I would love to solve this problem. Like I mentioned, I tried to investigate and found that the video/audio may not be rightly loaded when embedded using the url because the onerror() on video/audio was indeed getting invoked and was throwing error.

I might be also wrong about this though. I'm new to open source and Blocknote. But yes, trying my best to figure out and contribute actively here. Would love if you could guide me or provide some hints to solve this issue. If I won't be able to solve it, I'll update it here, so that other members or you could solve it.

[matthewlipski]

Ok! Let me know how it goes and PM me if you need some guidance, otherwise I can look into this next time we do a bugfix release

[thedevangvishnu]

I checked it thoroughly, the link is being accessed correctly after importing. I think, you are right about that this embedding might not work because these providers (like YouTube, Spotify, etc.) impose a stricter policy for embedding links directly into another application and would force us to use <iframe /> only. I think that might be the issue, but not 100% sure. I'm, not able to understand how to fix it. Tried enough. Guess, I'll leave it to you and then wait to learn how you fixed it. Thanks

[YousefED]

Could you add some links that you're trying to embed? This will help us reproduce the issue and figure out a solution you're looking for

[Mo-Tarifi]

Hi @YousefED, you can try any YouTube link. I already put in the description an example
https://www.youtube.com/watch?v=bgPuPSPZe2U.