Summernote how to be?

Question

WYSIWYG

Actually the subject is as follows: is it possible to change the code generated by the editor and how to do it correctly?
Specifically, you need to change the addition of the addition of the video sumernote generates such html

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

And I need this:

<div class="video-play m-b-30 m-t-30" data-src="https://www.youtube.com/embed/d5nfXqffvyc?rel=0&amp;amp;autoplay=1&amp;amp;showinfo=0">
<div class="embed-responsive embed-responsive-16by9">
<img class="embed-responsive-item" src="https://img.youtube.com/vi/ZmVQeK5V_zE/maxresdefault.jpg">
<div class="video-caption">
<h5>Uncharted 4: A Thief's End - Madagascar Preview</h5>
<span class="length">4:05</span>
</div>
<div class="video-play-icon">
<i class="fa fa-play"></i>
</div>
</div>
</div>

Moreover, in addition to the video, there is also a preview, a caption, the duration of this video, is it possible to implement this, if not, then mb there is another solution that supports this.