dawoe / OEmbed-Picker-Property-Editor

Property editor for Umbraco CMS to allow embedding 3rd party media like Youtube, Vimeo, ... outside of the rich text editor.
https://our.umbraco.org/projects/backoffice-extensions/oembed-picker-property-editor/
MIT License
10 stars 10 forks source link

Feature Request: Gallery and Overlay with Multiple Videos #8

Closed TRexStark closed 3 years ago

TRexStark commented 3 years ago

Hi @dawoe

I have tried to add this feature but I just couldn't figure out how to do it using the same setup you have. Practically I'm kind of new to building packages, so I follow the Umbraco Docs with some self-trials and errors and checking what others have done so far. The other drawdown is that I don't work with Visual Studio, but rather a cloud staging setup that is pushing files into a server directly.

Overall, if you are comfortable for me to reset the project the way I work to get this feature through, then you can merge it the way your project is set, that would be great.

The idea: Imagine you add multiple YouTube video embeds, you will need to have them big enough in the front-end to be able to play them inline. So instead, we can use the sources APIs to display the poster of the video with a play button perhaps, when clicked, the video opens in a model alike and even have a gallery style to move from one video to another.

I initially built a package that does this (partially), but I canned it because someone pointed me out to your package and suggested to just make pull requests to add my features.

Anyway let me know what you think as I'm building something for a client with this feature and I can easily just contribute it.

dawoe commented 3 years ago

Hi @TRexStark

So let me see if I understand correctly is to be able to extract a poster image from the video when you show it on the frontend ?

Sounds to me like something that needs to be solved in the rendering of the video's.

Don't know if this is something we can solve with this package.

Do you have some references on how to display a poster image using the sources API.

Dave

TRexStark commented 3 years ago

Hi @dawoe

I believe it's easy to solve as I created a package that does this but canned it so I can contribute to your package instead.

YouTube will require an API key which can be added by editors using a string field in the configuration. Vimeo and DailyMotion won't require it.

Upon calling the video embed, instead of rendering the iframe code, we can render the poster/thumbnails with a link to open the video in a pop up.

The package below does the part where the thumbnail is called and rendered but I got stuck initially with making it work properly. But now with your package, I think I can pull it out.

Check this one out and let me know what you think. https://our.umbraco.com/packages/backoffice-extensions/video-embed-by-uckript/

dawoe commented 3 years ago

Hi @TRexStark

If you want to display a poster image on the frontend you can use the following code to get the url of the youtube video.

@Model.Value<OEmbedItem>("propalias").Url

Would that work for you. Or is it really a requirement to show the poster image in the backoffice as well ?

Dave

TRexStark commented 3 years ago

Hi @dawoe

Not necessarily in the backoffice. I will try your suggestion and see how it goes.

Thanks for your response.

Tarik.