modifying summernote video embed feature

Question

When adding/embedding youtube video using summernote video plugin it returns code something like this

<iframe frameborder="0" src="//www.youtube.com/embed/LMlBP-nmNgs" width="640" height="360" class="note-video-clip"></iframe>

What I'm willing to do is to change this to

<div class='embed-container'><iframe src='https://www.youtube.com/embed/LMlBP-nmNgs' frameborder='0' allowfullscreen></iframe></div>

to remove fixed width/height etc, just trying to make it more responsive! Can anybody point me in the direction so that I can figure out how to override the existing embed video function. Thanks.

Answer 1

You can set the module you want to change to return your own html, you can check the src code to find the correct modules, in your case it's in the 'videoDialog' module, the 'createVideoNode' function:

$('.summernote').summernote('module', 'videoDialog').createVideoNode = function(url) { return *your own html* };

You could check the the source code to see how 'createVideoNode' is generating the html, but as you only need to add a div to the existing html it can be done like this:

var originalCreateVideoNodeFunction = $('.summernote').summernote('module', 'videoDialog').createVideoNode;

// replaces the original html function with your own
$('.summernote').summernote('module', 'videoDialog').createVideoNode = 
function(url) 
{ 
    // gets the native generated html (that has the iframe)
    var originalHtml = originalCreateVideoNodeFunction(url);

    var div = document.createElement('div');
    div.innerHTML = originalHtml;

    return div ;
};

Answer 2

Here is an example using custom button

$(document).ready(function() {
  $('#summernote').summernote({
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'italic', 'underline', 'clear']],
      ['fontname', ['fontname']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'hr']],
      ['view', ['fullscreen', 'codeview']],
      ['mybutton', ['myVideo']] // custom button
    ],

    buttons: {
      myVideo: function(context) {
        var ui = $.summernote.ui;
        var button = ui.button({
          contents: '<i class="fa fa-video-camera"/>',
          tooltip: 'video',
          click: function() {
            var div = document.createElement('div');
            div.classList.add('embed-container');
            var iframe = document.createElement('iframe');
            iframe.src = prompt('Enter video url:');
            iframe.setAttribute('frameborder', 0);
            iframe.setAttribute('width', '100%');
            iframe.setAttribute('allowfullscreen', true);
            div.appendChild(iframe);
            context.invoke('editor.insertNode', div);
          }
        });

        return button.render();
      }
    }
  });
});

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="summernote"></div>

Note: prompt used instead of bootstrap modal and url need to be validated