Show clip info

[salsatheone]

Hello, is it possible to show the Clip title, who created, creation date and the game played during the clip?

This is the effect I would like to achieve:

This streamer is using a random clip player, but they also have all the clip info on the screen.

Thanks!

[teklynk]

This is a great idea. I will work on adding this feature. What I am thinking is adding a text area where users can format the text that appears in the panel. Something like:

{title} While streaming {game} Clipped by {creator_name} on {created_at}

{title},{game},{creator_name},{created_at} would act as placeholders/variables.

The css/styling could be modified in the obs browser source to achieve the look that the user wants.

[salsatheone]

Alright! Good to know cause I was looking for something like that and I have been using yours with great success so far. Thanks!

[teklynk]

I have added a simple clips details panel as an option on the overlay.

CSS/styling can be controlled from the OBS browser source. To change the background color or the panel or panel time limit, change these values and add to the browser source:

details-container {

 background: #00000090;
 animation: fadeout 15s forwards;

}

Let me know if you have any questions or issues.

[salsatheone]

I've used it, but for whatever reason, it always shows the info of one clip and then it repeats the same info for all the clips. Always the same title with these 3 different clips.

[teklynk]

Interesting. I think this may be a cache issue? In the OBS browser source, click the Refresh cache of current page. Also, are you running this locally or using the hosted version here: https://twitch-clips-player.pages.dev. If running locally, you may need to pull in the latest code changes from the Main branch.

I tested this in OBS and was not able to reproduce this issue, which makes me think that it is related to browser sources cache.

[teklynk]

Also, If you want the panel to look similar to the original screenshot that you posted, try adding this CSS to the Custom CSS section of the OBS browser source.

#text-container {
    background: #00008890;
    animation: fadeout 20s forwards;
}
#details-container {
    top: 35vw;
    border-radius: 24px;
    transform: skew(5deg, -5deg);
    margin-left: 20px;
    background: #00008890;
    border: solid 2px #00008898;
    box-shadow: 10px 10px #00000090;
    animation: fadeout 20s forwards;
}
#details-container .details-text.item-0 {
    font-size: 4vw;
}

#details-container .details-text.item-1 {
    font-size: 3vw;
}

#details-container .details-text.item-2 {
    font-size: 2vw;
}

#details-container .details-text.item-3 {
    font-size: 1.5vw;
}

[salsatheone]

Yeah, I've tried the cache thing and it's not something that happened once. I actually restarted the PC and still happened.

[teklynk]

Thank you for trying that! Good News! I was able to reproduce the issue and fix it. So sorry for the confusion. Please try to clear the browser source cache and try the clips player again. You should not need to generate a new url.

[salsatheone]

It's working great now, did some CSS customization and it's now chef's kiss! Great stuff!