search

honestbleeps / Reddit-Enhancement-Suite

Reddit Enhancement Suite
http://redditenhancementsuite.com
GNU General Public License v3.0
4.09k stars 878 forks source link

[Request] Add expandos to youtube clips. #5344

Open DavidPHH opened 2 years ago

DavidPHH commented 2 years ago

Youtube implemented a clipping feature for videos and livestreams. Would it be possible to add expando support on posts linking to these clips?
Example post/clip

s3b- commented 2 years ago

The problem with this is, that youtube doesn't offer the embedding of livestream clips. I checked the documentation page (https://support.google.com/youtube/answer/10332730?hl=en) and it says that you can - but when I tested in on Doc's livestream, it didn't offer me an embed-link, but only a direct link.

import-that commented 2 years ago

could this be solved by using the direct link as a source for an iframe?

s3b- commented 2 years ago

The direct link links to the actual live stream video. So when embedding the direct link, it will include all the unnecessary stuff like the youtube logo, subscribe button, etc. The video wouldn even be in focus, I guess?

Kryptortio commented 2 years ago

could this be solved by using the direct link as a source for an iframe?

YouTube sets x-frame-options: SAMEORIGIN so unfortunately browsers will not allow it, you would need to bypass this security feature. Then I suppose you could make the iframe large enough to show the entire page and put it inside a container that crops it so that it only shows the video. Would probably be a brittle solution though (ui changes, add-ons and user preferences might break it), slow (needs to load everything) and maybe a security risk depending on how the bypass is done. So in short, likely not a viable solution.

TopFuel commented 2 years ago

The problem with this is, that youtube doesn't offer the embedding of livestream clips. I checked the documentation page (https://support.google.com/youtube/answer/10332730?hl=en) and it says that you can - but when I tested in on Doc's livestream, it didn't offer me an embed-link, but only a direct link.

Clips can actually be embedded (it works on Discord for example), if you check the meta tags og:video:url, og:video:secure_url and twitter:player on a clip page you can see the embed url for that clip.

Seems like it's a normal video embed url plus the parameters clip and clipt. The parameter clip is the clip id and clipt is something to do the the clip start and end time on the video, you can even replace it with a clipt from some other clip and it will work but the clip start and end time will be wrong.

When the clips feature was released it had the embed option under the share menu, but it got removed after for some reason.

DavidPHH commented 2 years ago

Any chance you could give an example? I see now that discord and twitter do embed clips properly, but I don't understand what you mean by

if you check the meta tags og:video:url, og:video:secure_url and twitter:player on a clip page you can see the embed url for that clip.

Edit: still don't get what you meant but here's an example of embeding the clip from the post mentioned in the issue:

<iframe src="https://www.youtube.com/embed/Dr2G2cu97rc?clip=UgzSTsqJwimy7qf8sKt4AaABCQ&amp;clipt=EM2YWBit7Vs&amp;autoplay=1&amp;auto_play=true" title="YouTube video player" allowfullscreen></iframe>

So I guess the pressing question is how does one get that clipt parameter

TopFuel commented 2 years ago

Any chance you could give an example?

Sure, so for example for this clip: https://www.youtube.com/clip/UgycS_ufnoS0wzY1hbR4AaABCQ If you check the page source code you will find meta tags in the header that contain the embed urls that discord, twitter and other websites use to embed videos.

Here are the meta tags with the embed url for that clip:

<meta property="og:video:url" content="https://www.youtube.com/embed/3rX9dUdtJQI?clip=UgycS_ufnoS0wzY1hbR4AaABCQ&amp;clipt=EAAYmHU">
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/3rX9dUdtJQI?clip=UgycS_ufnoS0wzY1hbR4AaABCQ&amp;clipt=EAAYmHU">
<meta name="twitter:player" content="https://www.youtube.com/embed/3rX9dUdtJQI?clip=UgycS_ufnoS0wzY1hbR4AaABCQ&amp;clipt=EAAYmHU">

As you can see the embed url is: https://www.youtube.com/embed/3rX9dUdtJQI?clip=UgycS_ufnoS0wzY1hbR4AaABCQ&clipt=EAAYmHU

DavidPHH commented 2 years ago

I implemented a dirty temp fix for my own self use: https://github.com/DavidPHH/Reddit-Enhancement-Suite/commit/f7854bf6ceb20b3e9e21364e9675502da10edef2#

Problems with this approach:

1) This uses https://www.opengraph.io/ to get the "videoSecureUrl" meta tag, the free plan seems very limited and probably won't last me long since it's 100 requests.

2) I don't really know what the getVideoData function is doing, but it seems to expect the detect function to return the video's ID, and to do that the detect function would need to be async since you'd need the meta tags from 1) to see it.

Approach No.2 https://github.com/DavidPHH/Reddit-Enhancement-Suite/commit/f793b1c6c0c7524d4393a793a2ec4243211f51a5 To address the second problem from the 1st approach I've made the detect function async and made it return a clip's video ID, but I'm not convinced this is a good way to do it. Maybe a more sane approach is to not call getVideoData for clips (how?) (also what is getVideo data for? Doesn't seem to affect expandos..?)

DavidPHH commented 2 years ago

Overall both of these approaches seem to work fine (for my usage at least). The main problem still is getting the OG meta tags. Would be nice If someone smarter than me can get that npm module to work or know of another way of fetching the tags.