mieweb / wikiGDrive

Wiki for Google Shared Drive
16 stars 5 forks source link

Create a way to imbed youtube videos to play on the videos and demonstrations page. #513

Open ashleyhorner opened 2 weeks ago

ashleyhorner commented 2 weeks ago

Is your feature request related to a problem? Please describe. When we publish videos to the google drive and then add them to the help docs using an ID, the video is sometimes blocked. This error causes people to lose access to the video. It would be better if we could host the videos on youtube but still have the ability to watch them straight on the docs.enterprisehealth.com website.

Describe the solution you'd like When creating documentation, I need a way to link a youtube video on the google doc page so that when it is commited, the video will display a thumbnail and play directly on the site.

Describe alternatives you've considered The alternative is guaranteeing that google drive does not block certain videos from being viewed. (See screenshot attached)

Additional context Add any other context or screenshots about the feature request here.

Screenshot 2024-10-24 at 3 23 35 PM
horner commented 2 weeks ago

@ggodlewski didn't we do this already? I can't find it in the code.

horner commented 2 weeks ago
image
monpie3 commented 1 week ago

We can create another shortcode, similar to gvideo, but specifically for YouTube embeds. https://github.com/mieweb/docs/blob/master/themes/wc-eh-docs/layouts/shortcodes/gvideo.html

Additionally, we could add additional attributes like time and title for more flexibility: https://www.kiroule.com/article/use-video-embeds-in-hugo-theme/

monpie3 commented 1 week ago

I'll try to republish Videos and demonstrations page using built-in hugo shortcode: {{< youtube __R9twSkS2A >}}

monpie3 commented 1 week ago

Okay, this worked: https://docs.enterprisehealth.com/videos-and-demonstrations/#generative-ai

It's larger than the rest of the videos, but I think we can easily fix this by adding youtube.html in /themes/wc-eh-docs/layouts/shortcodes with the appropriate html

So, this can be a way to format a YouTube video in Google Docs: {{< youtube ID_FROM_YOUTUBE_VIDEO_URL>}}

When the YouTube link looks like: youtube.com/watch?v=__R9twSkS2A , it will be: {{< youtube __R9twSkS2A >}}


I guess there’s no point in expanding this tag further, so I would just hardcode the size and width in HTML. What do you think @ggodlewski and @horner ?

ggodlewski commented 1 week ago

@ggodlewski didn't we do this already? I can't find it in the code.

@horner we've done this for youtube videos. You can transform yt links to player. It's just not configured.

Example: https://dev.wikigdrive.com/drive/0AF_nrE0_QH_2Uk9PVA#drive_config

image

This converts yt links into @monpie3 code:

https://dev.wikigdrive.com/drive/0AF_nrE0_QH_2Uk9PVA/content/functions/quality-of-care/create-file-for-submission.md#markdown

image

If that is ok, all you need is to copy this rule form prod to dev.

I think we also discuss with @wreiske about uploading google videos to cloudflare. That would require writing additional code (cloudflare worker, or wgd upload and rewriting links).