Youtube embed plugin

[rhukster]

Another plugin request was for a YouTube embed plugin:

http://avexdesigns.com/responsive-youtube-embed/

Would be nice if youtube URL could be auto-detected and converted to an embed format.

[maximkou]

Hi, i can help you with implementation, but there are a few clarifying questions:

• You see it as a Twig Extension or plugin, which modify output?
• Auto-detect URL work only if this not located in link? (e.g. <a href="URL">video</a>)

Thanks.

[rhukster]

I think ideally it would be an onPageProcessed event in a plugin to actually find and transform youtube links via auto-detection.

If you type a generic URL and have markdown auto-link it during processing, the link would be something like:

https://www.youtube.com/watch?v=rZudJiJcw3s

This would then be detected via regex expression, and then replaced with the correct embed code. What do you think?

[maximkou]

Thanks for the answer. I think this should work.
I show to you the plugin in a few days.

[w00fz]

Some good starting point and ideas I would have personally followed to write such plugin.

A regex we are using at RocketTheme for our RokBox extension that has served us pretty well over the years.

/(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(watch\?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*)).*/i

Matches the ID of the youtube link, no matter the format and wheter it's from full URL, shortened URL or no-cookie URL. Then it transforms it as:

//www.youtube.com/embed/$3

where the protocol https?: is purposely omitted so that it won't need extra checks to render as secure http when required, and where $3 is the ID matched in the regex above.

We also opened these settings to the user to toggle:

autoplay    : 1,
autohide    : 1,
fs          : 1,
rel         : 0,
hd          : 1,
vq          : 'hd1080',
wmode       : 'opaque',
enablejsapi : 1

Probably not all needed but some are definitely good to have, like the autoplay or the vq (video quality) or enabling the jsapi.

[maximkou]

Thanks @w00fz, I will definitely use it.

[maximkou]

@rhukster, @w00fz you can see plugin here: grav-plugin-videoembed. Will be happy hear your critic and suggestions.

[rhukster]

Ah very cool! Will check it out today. Thanks!

[w00fz]

Very nice. Had a look at the plugin and works fine. The only couple issues I've spotted are the reprocessing of the twig $page->process(['twig' => true]); that I don't think you need.

The other thing is that you can't override the settings from within a page which is quite useful for customizing the settings on the fly per page.

I can fork yours and put together a pull request but if you want to have a play with it, have a look at the lightslider onPageInitialized, that shows how to merge the settings from the page headers.

Thanks for your contribution tho, looking good! Was even thinking that this could be expanded to more media services such as vimeo and vine.

[rhukster]

Yes this looks pretty solid. I agree with @w00fz regarding the twig processing. That should not be needed and will only add overhead.

If you didn want to expand, the name of the plugin probalby should change to something along the lines of videoembed ?

[maximkou]

Thanks for detailed feedback.

@w00fz, $page->process(['twig' => true]) - yes, this is issue. I put this, because calling $page->content($var) initiate reprocess page from markdown(until I not found a more way to change the page content). I explore this and fix it soon.

@rhukster, yes, adding more services is a good idea. I rename repo and add to development plan.

Thanks again for responsiveness.

[maximkou]

Hi, you can add my plugin into plugin list on site? Or better send request about this to [email protected]?

[rhukster]

Congratulations your plugin is looking very good. I hope you don't mind be the guinea pig for this as you have developed our first 3rd party plugin! So we are working it out as we go :)

As your plugin uses composer and is not 'ready-to-go' without it, we need to be able to link to a self contained .zip file that the average non-developer user can download from the getgrav.or/downloads/plugins page. So no need for extra steps, just extract, rename the folder to videoembed and they are good to. You can probably create a simple build script to zip it up when you release a new version, and then manually add it your release (this is what we do for skeletons & grav itself).

Once you have a zip, this is the reset of the info we have for each plugin:

---
title: Breadcrumbs
date: 11:36 07/18/2014
link: http://github.com/getgrav/grav-plugin-breadcrumbs
version: 1.1.0
download: https://github.com/getgrav/grav-plugin-breadcrumbs/archive/1.1.0.zip
demo: http://demo.getgrav.org/blog-skeleton
icon: info-circle
author: Team Grav
---

The **Breadcrumbs** plugin provides a simple method to display the depth of your content/navigation structure.

Demo is optional, icon is one chosen from: http://fortawesome.github.io/Font-Awesome/icons/

After we sort this all out with you, i'll create a step-by-step guide to document the process for others.

Thanks so much for your contribution BTW!

[maximkou]

@rhukster, perhaps it would be better if the plugin info file will be stored in the remote resource (repository, hosting) and you will periodically request it?

E.g.:

• info file stored in my repo
• after releasing executed build script, which update info(e.g. travis)
• your site fetch this file and parse.

What you think about this? This will prevent manually adding releases, changing info ...

Sorry for my bad english, i hope you understand what I mean.

[rhukster]

In the future we plan on having a developer 'portal' of sorts, where you can login and update this information.

In the short term something like what your suggesting could work if we could ensure it was valid. we now have a caching twig plugin that lets us periodically pull stuff into twig, but even that will take some setup.

For right now you'll have to provide us this info yourself i'm afraid, and we'll update it manually when you let us know there's a new release.

[maximkou]

It's clear.

I use composer in project only for development(for testing) - project does not have any no-dev dependencies, therefore I simply add to my project .gitattributes, which contains export ignoring rules(ignore tests, composer.json and more files, which not needed for user).

Export repository as archive does not contain unnecessary files.

My plugin info:

---
title: VideoEmbed
date: 22:00 08/28/2014
link: https://github.com/maximkou/grav-plugin-videoembed
version: 1.1.0
download: https://github.com/maximkou/grav-plugin-videoembed/archive/v1.1.0.zip
icon: video-camera
author: Maxim Hodyrev <[email protected]>
---

The **VideoEmbed** plugin convert links to videos from popular sharing services to embed format. Supported: Youtube, Vimeo, Coub.com and planned more services.

Thank you, you are doing a great job. Can I help you with something else?

[rhukster]

Ok awesome, we're going to do a quick test, and then assuming no issues, we'll add it to the site.

Regarding other plugins, we have another one in the issues: dropbox support.

Another one is something to provide flickr/500px/smugmug/etc, to produce an image gallery. Something like this would be really cool: https://wordpress.org/plugins/photonic/

It could potentially use the image class to create thumbnails automatically. What do you think?

Another thing we could really do with help on is tests and coverage validation (like you've done so well on in your plugin). Not glamorous i know, but something we would like to get done.

Oh one other thing, is the roadmap: http://getgrav.org/blog/grav-roadmap

If you have any ideas thoughts, or want to help out with anything there, let us know!

[w00fz]

Really nice job on the plugin Maxim, thanks!

[rhukster]

Plugin is now live!!! http://getgrav.org/downloads/plugins#extras

Thanks!

[maximkou]

Cool! Thanks!

About top comment: interested ideas, I will think about it.

[rhukster]

BTW if you want to talk about Grav stuff, please hop on freenode IRC, #grav as that's where we hangout :)