Unable to embed Src to iframe programmatically - iframe

Question

I'm working on a requirement where I can record the screen and load the recorded video into the quill editor.
Right now, when I'm trying to embed the video to an iframe, I'm not seeing any src value for the embeded iframe.
But when I change the src using inspect element of the browser, video is loading in the quill editor:
Below is my code.
let range = tempEditor.getSelection(true);
tempEditor.insertEmbed(range.index, 'video', tempSrc, 'user');
Here
tempSrc value is blob:http://localhost:4100/4ab588cf-7ed7-4c08-8852-6c03895ae47a
After the above statement, I can see the iframe in the editor but not the src value.
When I try to update the source as above in the inspect browser, video is playing fine

Answer 1

I am using following code snippet to embed an iframe (i.e. YouTube video) inside Quill.
Make sure to have the import class at the top of your class file import Quill from 'quill';
const id = '123456' //Just a unique id
const vendorLower = 'youtube';
const editorRef = this.quillEditorRef;
const range = editorRef.getSelection();
let index = 0;
if (range !== null) {
index = range.index;
} else {
index = editorRef.container.innerText.length + 1;
}
const BlockEmbed = Quill.import('blots/block/embed');
class MediaBlot extends BlockEmbed {
static create(value) {
const node = super.create();
node.setAttribute('src', 'https://www.youtube.com/embed/XXXXXXXXX');
node.setAttribute('frameborder', '0');
node.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
node.setAttribute('allowtransparency', true);
node.setAttribute('allowfullscreen', true);
node.setAttribute('scrolling', '0');
node.setAttribute('width', '100%');
node.setAttribute('height', '315px');
return node;
}
static value(node) {
return node.dataset.id;
}
}
MediaBlot.blotName = vendorLower;
MediaBlot.tagName = 'iframe';
Quill.register(MediaBlot);
this.quillEditorRef.insertEmbed(index + 1, vendorLower, id);
Hope someone will find this useful.
Cheers!

Answer 2

vibin. You said:
Here tempSrc value is
blob:http://localhost:4100/4ab588cf-7ed7-4c08-8852-6c03895ae47a
Setting a value for <iframe> src is something that should be done carefully:
The tag specifies an inline frame. An inline frame is used to
embed another document within the current HTML document.
Source
So, basically, an iframe represents cutting and pasting a portion of something on your site. For copyright reasons, many companies and websites prevent content from being displayed freely. Some, however, allow this to be done but with certain measures.
For example, YouTube allows its videos to be shared and viewed on other sites using <iframe>, but using a different URL. If you have the following URL in the browser:
https://www.youtube.com/watch?v=NihM746-Msw
The embed version, placed in <iframe>, will be as follows:
https://www.youtube.com/embed/NihM746-Msw
And the <iframe> element could have the following content:
<iframe width="560" height="315" src="https://www.youtube.com/embed/NihM746-Msw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Quill video format does this process automatically when a youtube video URL (from the browser) is inserted.
But there is something to watch there. Note that this way you are using a video hosted on a website, ie on the internet. If you want to display a video from your local machine (from a file), you'll need to use the HTML <video> element, not <iframe>.
How to Embed Video using HTML5 with local file
W3Schools - Video Tag
Embeds: Video, Audio and iFrame Elements
Quill's native video format does not work with the HTML video element. Therefore, you will need to create a new format that has this desired requirement.
You can find more about creating your own format at the following links:
Cloning Medium with Parchment
Quill-Examples-and-FAQ
Awesome Quill - Modules
See also the source code of the video format.
As you can see, this is not a problem with Quill, but a matter of defining the desired settings. I hope this can solve your problem and if you need more information, please add a comment to my answer and I will edit it if necessary.