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!
We need new editor
You can define your own audio and video player partials, check the docs here:
v3 works the same way
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?
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.
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.
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>
@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%;
}