How to integrate lite-youtube in tinymce?

I'm trying to integrate the well-known lite-youtube plugin for writing tinymce's rich text.

And I did not succeed in understanding how to integrate the plugin into the system of tinymce, I would appreciate it if someone could help me with this, thanks

This is my code:

<script>
tinymce.init({
selector: '#myTextarea',
plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount image',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat | image | media',
language: 'he_IL',
image_class_list: [{title: 'Full size', value: 'great_picture_of_the_article'}],
image_dimensions: false,
link_class_list: [{title: 'Formatted link', value: 'link_to_external_site'}],
</script>

Here are the codes I tried to attach:

  media_url_resolver: function (data, resolve) {
    if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
      var embedHtml = '<lite-youtube videoid=' + data.url +
      '"></lite-youtube>';
      resolve({html: embedHtml});
    } else {
      resolve({html: ''});
    }
  },
video_template_callback: function(data) {
   return '<lite-youtube videoid="' + data.source1 + '"></lite-youtube>';
 },

Solution

Please try to use it at your tinymce.init(). It's work for me.

<script>
        tinymce.init({
        selector: '#myTextarea',
        plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount image',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat | image | media',
        language: 'he_IL',
        image_class_list: [{title: 'Full size', value: 'great_picture_of_the_article'}],
        image_dimensions: false,
        extended_valid_elements: ['lite-youtube[videoid]'],
        link_class_list: [{title: 'Formatted link', value: 'link_to_external_site'}],
</script>

And put video to your HTML like this

<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>

Where videoid - ID of Youtube video (see youtube video URL).

Or you can put video as usually, but before display text make preg_replace_callback in php, for example, (my choice) like this:

<iframe src="https://www.youtube.com/embed/8E8MU11X0YI"></iframe>

preg_replace_callback and regular expression

        $description = preg_replace_callback(
            '/<iframe.*?src="(.*?)".*?<\/iframe>/i',
            function($matches) {
                $src = $matches[1];
                if (strpos($src, 'youtube.com') !== false) {
                    return '<lite-youtube videoid="' . $src . '"></lite-youtube>';
                }
                return '';
            },
            $description
        );

and on exit:

<lite-youtube videoid="8E8MU11X0YI"></lite-youtube>

This code need to paste in source code of TinyMCE

I hope I helped you