Unable to embed Src to iframe programmatically

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

Please, provide the **relevant** code of your video embeding — Matheus Cuba, Apr 20 '18 at 20:45

Anjana Silva · Answer 1 · 2019-12-20T06:36:09.643

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!

score 0 · Answer 2 · answered Dec 30 '19 at 15:48

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>.

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:

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.

Unable to embed Src to iframe programmatically

2 Answers2