JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<div class="prompt" id='prompt'>
  <div></div>
  <div>            
  <div><input type="text" id='input' value='https://www.youtube.com/embed/k3zimSRKqNw'></div>
  <div>
    <button id="ok" type="button">OK</button>
  </div>
 </div>
</div>

<div id="toolbar">
  <span class="ql-formats">
  <button class="ql-bold"></button>
  <button class="ql-italic"></button>
  <button class="ql-underline"></button>
  <button class="ql-strike"></button>
  </span>
  <span class="ql-formats">
   <button class="ql-video"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-clean"></button>
   </span>
</div>

<div id='editor'></div>

CSS

.prompt {
    display: none;
}

JavaScript

var prompt = document.getElementById('prompt');
var input = document.getElementById('input');
var okButton = document.getElementById("ok");

okButton.onclick = () => {
  prompt.style.display = 'none';
  embedVideo();
};

const embedVideo = () => {
  let range = this.quill.getSelection();
  this.quill.insertEmbed(range.index, 'video', input.value);
  this.quill.setSelection(range.index + 1);
}

function videoHandler() {
  if (prompt) prompt.style.display = 'block';
}

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: "#toolbar",
      handlers: {
        video: videoHandler
      }
    }
  },
  placeholder: 'Content',
  theme: 'snow'
});