OpenGraph/oEmbed support #1362

toby3d · 2022-08-31T05:38:47Z

Describe the feature

Comparison of meta-information received in the same video from Piped and YouTube:

oEmbed and OpenGraph is a simple tools to get meta-information and even a built-in player for YouTube videos that can be implemented in Piped. Thanks to it, all links to an instance in any provider will not look identical to each other and allow you to see the context of the video before you click on the link.

Why would this be useful to add?

Will allow you to embed the Piped player directly into any site that supports embedded media
Allows you to see the title, description and cover art of the video without clicking on the link, facilitating visual search

Concept(s)

OpenGraph

Here it's simple, just specify in the template a set of meta nodes with the keys with the prefix og: and values obtained from the YouTube video page and adapted for the Piped instance:

<meta property="og:site_name" content="Piped"> <!-- site name -->
<meta property="og:url" content="https://piped.privacy.com.de/watch?v=tsD4im7K3wg"> <!-- video page URL -->
<meta property="og:title" content="How does it feel to live long enough to see all your favorite franchises go down in flames?"> <!-- video title -->
<meta property="og:image" content="https://pipedproxy.kavin.rocks/vi_webp/tsD4im7K3wg/maxresdefault.webp?host=i.ytimg.com"> <!-- thumbnail URL -->
<meta property="og:image:width" content="1280"> <!-- thumbnail width -->
<meta property="og:image:height" content="720"> <!-- thumbnail height -->
<meta property="og:description" content="origin: Star Trek Discovery Season 1 - re:Viewhttps://youtu.be/ri7v-utIcvY"> <!-- video description -->

oEmbed

Architecturally, you should provide a router intended only for receiving requests from providers for previews and responding to them, like /oembed, like YouTube. This router should accept GET requests with query parameters and respond to them with JSON/XML (depending on provider's preferences) in a special format.

Since Piped instances cannot appear in the global providers list in time, to detect and exploit the oEmbed router by a provider, it needs to be prompted with a link node in the template and/or Link server header.

Headers examples:

Host: piped.kavin.rocks
Link: <https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=json>; rel="alternate"; type="application/json+oembed"; title="JSON oEmbed"
Link: <https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=xml>; rel="alternate"; type="text/xml+oembed"; title="XML oEmbed"
...

Template examples:

<html>
  <head>
    ...
    <link rel="alternate" type="application/json+oembed" href="https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=json" title="JSON oEmbed" />
    <link rel="alternate" type="text/xml+oembed" href="https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=xml" title="XML oEmbed" />
    ...
  </head>
  <body>
  ...

It is desirable to support both formats and both methods of routing identification for backward compatibility with older ISPs that do not know how to JSON or get data from headers.

A JSON response to an oEmbed request for a video might look something like this:

{
	"type": "video", // embed type
	"version": "1.0", // always "1.0"
	"title": "How does it feel to live long enough to see all your favorite franchises go down in flames?", // video title
	"author_name": "Cyber Zomb", // channel name
	"author_url": "https://piped.privacy.com.de/channel/UCUtc7dMxnccC8XXXqZAHf-A", // channel url
	"provider_name": "Piped", // site name
	"provider_url": "https://piped.kavin.rocks/", // base url of instance
	"cache_age": 3600, // the proposed response caching time by the provider in seconds
	"thumbnail_url": "https://pipedproxy.kavin.rocks/vi_webp/tsD4im7K3wg/maxresdefault.webp?host=i.ytimg.com", // video thumbnail
	"thumbnail_width": 1280, // thumbnail width
	"thumbnail_height": 720, // thumbnail height
	"html": "...", // HTML code for downloading and rendering an embedded player of the requested size
	"width": 425, // player width requested by provider
	"height": 344 // player height requested by provider
}

Additional context

No response

Acknowledgements

I have searched the existing issues and this is NOT a duplicate or related to another open issue.
I have written a short but informative title.
I filled out all of the requested information in this form.

The text was updated successfully, but these errors were encountered:

rafalohaki · 2022-09-09T17:44:07Z

+1

Vardor · 2023-02-05T17:36:03Z

+1

Is there any workaround for this issue?

jim3692 · 2023-06-21T07:53:59Z

I had developed this proxy as a workaround for this some time ago, so I don't know if it still works.
The code can be found here: piped-html-proxy
I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.

gunchleoc · 2023-10-27T19:08:37Z

Same problem on Mastodon, no preview cards.

lordkitsuna · 2024-02-24T07:28:19Z

kinda surprised this isnt considered high priority. its a pretty large blocker for the average person to be willing to use piped. i have for now resorted to just providing both links, with the pipe linked set to not preview so it can just piggyback off the youtube preview

but that just means the ty link is used 99% of the time sadly. once i convince people to load the actual piped page they have no problem with piped player for the most part but its never going to be viable as a true replacement missing something as basic as link previews

lukyyy9 · 2024-03-13T15:22:00Z

+1 big need <3

luketeam5 · 2024-04-07T00:34:20Z

I had developed this proxy as a workaround for this some time ago, so I don't know if it still works. The code can be found here: piped-html-proxy I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.

Any progress with the Caddy extension? I would love this feature as I am quite surprised it isn't implemented yet from the last time I checked.

jim3692 · 2024-04-10T17:55:23Z

I had developed this proxy as a workaround for this some time ago, so I don't know if it still works. The code can be found here: piped-html-proxy I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.

Any progress with the Caddy extension? I would love this feature as I am quite surprised it isn't implemented yet from the last time I checked.

There is no progress on the Caddy extension, but the proxy works.

Please open an issue there if you need more help to configure it for your instance.

Bnyro · 2024-07-27T15:16:38Z

I've created a small service (needs to be hosted by the server admin) that can be used to share Piped links, located at https://github.com/TeamPiped/piped-opengraph. There's an example docker-compose.yml you should use, I've additionally pushed the image to codeberg.org/bnyro/opengraph (arm64 only) for now as I don't have access to Kavin's DockerHub Account.

Usage:

replace the domain of the url you want to share with the one of the piped-opengraph service, e.g. https://piped.example.com/watch?v=abcedfg with https://piped-opengraph.example.com/watch?v=abcedfg
That's it. You now get a preview and clicking the link will redirect you to the normal Piped frontend as you'd expect to.

Works for:

Videos (/watch)
Playlists (/playlist)
Channels (/channel/)

Demo:

lordkitsuna · 2024-07-27T18:35:30Z

I've created a small service (needs to be hosted by the server admin) that can be used to share Piped links, located at https://github.com/TeamPiped/piped-opengraph. There's an example docker-compose.yml you should use, I've additionally pushed the image to codeberg.org/bnyro/opengraph (arm64 only) for now as I don't have access to Kavin's DockerHub Account.

Usage:
* replace the domain of the url you want to share with the one of the `piped-opengraph` service, e.g. `https://piped.example.com/watch?v=abcedfg` with `https://piped-opengraph.example.com/watch?v=abcedfg`

* That's it. You now get a preview and clicking the link will redirect you to the normal Piped frontend as you'd expect to.
Works for:
* Videos (`/watch`)

* Playlists (`/playlist`)
Known quirks:
* Channel previews are currently broken due to YouTube changes.
Demo:
* https://ppv.chatoyer.de/watch?v=myAHrXIwqXs

* view-source:https://ppv.chatoyer.de/watch?v=myAHrXIwqXs

Awesome stuff, I was messing around with the demo and I'm just curious if there's any customization to what it previews that can be done? At the moment the thumbnail is Tiny and it's just a huge wall of the description text which isn't ideal but is at least better than nothing

Bnyro · 2024-07-27T18:46:00Z

Awesome stuff, I was messing around with the demo and I'm just curious if there's any customization to what it previews that can be done? At the moment the thumbnail is Tiny and it's just a huge wall of the description text which isn't ideal but is at least better than nothing

Not as far as I know, and looking at the OpenGraph specs at https://ogp.me/ it doesn't seem so.
Did you try the URL previews of other services (e.g. Mastodon, Twitter, ...) to see if they have a larger thumbnail?

toby3d added the enhancement New feature or request label Aug 31, 2022

Bnyro mentioned this issue Oct 12, 2022

Show video title and thumbnail preview when linking piped on another sites #864

Closed

thecashewtrader mentioned this issue Nov 1, 2022

What Happen To The View On YouTube Button? #1611

Closed

3 tasks

Bnyro mentioned this issue May 26, 2023

Meta/Open-Graph Tags (SSR Required) #2459

Closed

3 tasks

Bnyro mentioned this issue Aug 9, 2023

Discord Embeds do not show the content of the Piped video page #2787

Closed

1 task

Bnyro mentioned this issue Oct 29, 2023

Piped vedio share url didn't carry meta data. #3082

Closed

1 task

Bnyro mentioned this issue Nov 20, 2023

Add metadata to video pages #3161

Closed

3 tasks

FireMasterK added the P1 label Feb 24, 2024

Bnyro mentioned this issue May 9, 2024

Piped.video - links dont generate video teasers in 3rd party apps #3603

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OpenGraph/oEmbed support #1362

OpenGraph/oEmbed support #1362

toby3d commented Aug 31, 2022 •

edited

Loading

rafalohaki commented Sep 9, 2022

Vardor commented Feb 5, 2023

jim3692 commented Jun 21, 2023

gunchleoc commented Oct 27, 2023

lordkitsuna commented Feb 24, 2024

lukyyy9 commented Mar 13, 2024

luketeam5 commented Apr 7, 2024

jim3692 commented Apr 10, 2024

Bnyro commented Jul 27, 2024 •

edited

Loading

lordkitsuna commented Jul 27, 2024

Bnyro commented Jul 27, 2024

OpenGraph/oEmbed support #1362

OpenGraph/oEmbed support #1362

Comments

toby3d commented Aug 31, 2022 • edited Loading

Describe the feature

Why would this be useful to add?

Concept(s)

OpenGraph

oEmbed

Additional context

Acknowledgements

rafalohaki commented Sep 9, 2022

Vardor commented Feb 5, 2023

jim3692 commented Jun 21, 2023

gunchleoc commented Oct 27, 2023

lordkitsuna commented Feb 24, 2024

lukyyy9 commented Mar 13, 2024

luketeam5 commented Apr 7, 2024

jim3692 commented Apr 10, 2024

Bnyro commented Jul 27, 2024 • edited Loading

lordkitsuna commented Jul 27, 2024

Bnyro commented Jul 27, 2024

toby3d commented Aug 31, 2022 •

edited

Loading

Bnyro commented Jul 27, 2024 •

edited

Loading