Richeditor insert youtube video

Need Help
#1

Hi. When I use the “insert video” button on the froala richeditor widget and select “by URL” and paste a youtube link, I get only a CORS error.
Anyone knows how to solve this?
I’d rather prefer to avoid embedding generating the iframe in youtube.
Thanks!

#2

We need new editor :stuck_out_tongue:

3 Likes
#3

You can define your own audio and video player partials, check the docs here:

v3 works the same way

2 Likes
#4

Hi @marco.grueter , Thanks! this is great and I had definitely missed that one. One question though, do you know if there’s a way to override that partial but FROM a plugin?

#5

I didn’t try it (and haven’t used it before) but you should be able to achieve this with either the

https://octobercms.com/docs/api/cms/page/beforerenderpartial

or

https://octobercms.com/docs/api/cms/page/renderpartial

events.

#6

Uh no, sorry - that won’t work unless a partial exists in the theme. But I guess you can dump a dummy file into the theme in your plugin.

There might be a solution that involves overriding or extending the MediaViewHelper class, but that might get messy.

#7

I made a local plugin that adds a Twig filter. In my content (Markdown or Rich Text Editor) I just enter the youtube url of the video and the filter replaces that with an embed code of the player.

It will replace both long and short urls: YouTube… and https://youtu.be/…

This is my plugin code:

class Plugin extends PluginBase
{
    /**
     * pluginDetails about this plugin.
     */
    public function pluginDetails()
    {
        return [
            'name' => 'Youtube',
            'description' => 'Enable Twig YouTube filter',
            'author' => 'Nico',
            'icon' => 'icon-youtube-play'
        ];
    }

    public function registerMarkupTags()
    {
        return [
            'filters' => [
                'youtube' => [$this, 'embedYoutube']
            ]
        ];
    }

    public function embedYoutube($text)
    {
        $text = preg_replace("/http(s)?:\/\/youtu\.be\/([^\40\t\r\n\<]+)/i", '<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/$2"></iframe></div>', $text);
        $text = preg_replace("/http(s)?:\/\/(w{3}\.)?youtube\.com\/watch\/?\?v=([^\40\t\r\n\<]+)/i", '<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/$3"></iframe></div>', $text);
        return $text;
    }
}

On the page, just add the filter:

    <section class="content">
        {% if post.entry_type == 'markdown_post' %}
            {{ post.content|md|content|youtube }}
        {% else %}
            {{ post.content|content|youtube }}
        {% endif %}
    </section>
3 Likes
#8

@naicko , this is absolutely great. Will try it on my projects. Thank you for sharing it.

Bonus track:
If we add this css, those embed get completely responsive:

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   width: 100%;
   height: 0;
}
.video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
2 Likes