Ability to add videos with a button

[NightMean]

Before submitting this feature request I have

• Reviewed the documentation and verified that my feature request isn't already a feature.
• Reviewed the existing feature requests and my feature has not been requested.
• Checked the tasks taged issues and verified my feature is not covered.

Please Describe The Problem To Be Solved
Most of the recipes I cook are from Youtube. Sometimes it is nice to see the exact steps. Videos can also include helpful cooking tips.
I noticed that there isn't an easy way to add videos to recipes.
While I am aware of the embedded iframe solution, I wouldn't say it is user friendly in current state.

Suggestion:

• Include a new button in the recipe editor which would allow to add an URL from online providers (For now Youtube would be enough).
• Typical URL should be accepted e.g.: https://www.youtube.com/watch?v=NUremX6K_4Y or https://youtu.be/NUremX6K_4Y instead of an current implementation of iframe.

Optional: After fetching the URL, a prompt will be shown if Youtube thumbnail should be used as a recipe thumbnail.

Mockup:

First suggestion:

• After importing the URL a new button would be added next to heart icon in the actual recipe.
  Mockup:
  

Second suggestion:

• Instead of adding a new button next to heart icon, iframe can be implemented above the current Instructions steps.
  Mockup:
  

Comparision:
In my opinon, the first solution is easier to implement as the button will open a new tab of the video.
Multiple providers can be supported easily

Second solution offers more user friendly solution.
While watching the video in iframe, I can mark the items I have prepared/steps I have done without jumping to another tab.

Additional Information

• If the feature is accepted I'm willing to submit a PR to provide this feature

I would be willing to help conceptualize or test the solution, but I don't have the knowledge to help with coding.

[Dwarih]

I second this. Current embed implementation is not really documented (Only found information on Discord)

[hay-kot]

I really like option 2. I think I'm up for writing the code for this, but someone else would probably be able to get to it before me. I do have a few questions

1. How does the embedding work with just the URL?
2. Does this ONLY work with youtube?
3. How does this work with nested embedding, does it work if I embed the page inside another page?

Once we figure out how to embed the video in a flexible way, it should be fairly easy to implement. Save the URL in the database and pass it along on the frontend.

I do want to be clear that Mealie won't ever support hosting your own videos through Mealie, only embedding external links since it's such a huge surface area to cover.

[NightMean]

1. For Youtube it looks pretty much the same, it adds an unnecesary border. It doesn't work for Vimeo though.
2. No. If a service allows embeds then with the direct video iframe you can get it to work. (Can be seen below)

• Vimeo also offer embed editor which can be customized a little.

• If there is a direct link to the file, a default HTML player will be used.

• This site does not offer embeds and I can't get the video to show in Mealie.

3. Unfortunatelly I do not have the knowledge to create a test page for it. Someone else could probably test this.

I understand that Mealie isn't a streaming platform for cooking videos.
This is why I'd only like to have an easy "shortcut" to other providers e.g. Youtube/Vimeo and so on.

For the test I used the following:

Youtube:

<iframe width="300" height="200" src="https://www.youtube.com/embed/g9pWsxEtiAg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipb

oard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Youtube embed with just a URL:
**<iframe  src="https://www.youtube.com/embed/g9pWsxEtiAg" width="300" height="200"></iframe>

Vimeo:
**<iframe src="https://player.vimeo.com/video/129980606" width="300" height="200" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Vimeo embed with just a URL: (Doesn't work)
 <iframe  src="https://vimeo.com/129980606" width="300" height="200"></iframe>

The output was this:

I think the easiest solution is to use Youtube and Vimeo only. I believe those platforms are known and offer most of the recipes that are even linked on some cooking sites. Other services may not support embeds and I don't think there is a one-size fits all solution for this,

After adding an URL, It could show a warning saying that only Youtube and Vimeo is officialy supported.
(Optional: Check if domain points to Youtube or Vimeo?)
Perhaps an option for unsupported sites could be added which would say something like: "The site must support embeds, otherwise it might not properly show in Mealie"? Could be just a link to a Wiki page with a simple tutorial for embeds.

[hay-kot]

I think the easiest solution is to use Youtube and Vimeo only. I believe those platforms are known and offer most of the recipes that are even linked on some cooking sites. Other services may not support embeds and I don't think there is a one-size fits all solution for this,

I'm kind of on the fence about this now. I'm not sure what benefit this offers over what already exists, I think using the markdown syntax in either the description of a step is a more universal option. I'm fairly certain that as soon as this get's added there's going to be requests to support additional video platforms, especially odd-ball self hosted ones considering the user space.

[NightMean]

To be honest I didn't know embeds were actually supported as I couldn't find any information about it. There was only 1 hint which I found on Discord which worked.
I understand your concern about video platform requests. Perhaps instead of directly saying to the user that it is possible to add embed videos, a simple button saying Insert Embed or just an icon would be enough?

The thing with current "implementation" is:

• Video uses the space for Step 1. It cannot be added above the Steps (Could be misleading for other users who might think that it is required to watch the video at first)
• Generated embed preview from Youtube is too much big by default ("width=2133" height="978")
• Finding the correct aspect ratio so that the thumbnail still shows properly can be a challenge for some

[RTUnit]

Thank you for sharing this capability. I was copying recipes to Mealie, but some of them are in form of a video.
I was able to add video file (mp4) as Asset, and use VIDEO element to play the video file when viewing the recipe.

Short instruction, so that others can reproduce:
Step 1: upload your video file as File type in the Asset section (it is mandatory to specity Name of the file.

Step 2: save the recipe, and copy the link to the file:

The link will be something like this: http://server:port/api/media/recipes/shokoladnyi-desert/assets/video-shokoladnyi-desert.mp4
For future compatibility, just copy the part from /api, like this: /api/media/recipes/shokoladnyi-desert/assets/video-shokoladnyi-desert.mp4

Step 3: go into Edit of recipe, paste following code in Description area. Replace the src attribute with the link you copied:
Your description can go here or after the VIDEO element. <video width="512" height="384" controls autoplay src="/api/media/recipes/shokoladnyi-desert/assets/video-shokoladnyi-desert.mp4" type="video/mp4"> </video>

If you do not want that video starts automatically playing, then remove autoplay attribute.

Result:

Of course someone will say that Mealie is not designed for this :-), but I am Ok to store 100MB files in SQLite database, and really need this capability. So I am very glad that I found this discussion. Thanks!

[usma0118]

related #1474

[michael-genson]

Multiple options are discussed here, as well as general HTML support (iframes, tables, headers, etc.) so I'm going to close this one