Twitch Shout-out Clips Player

Shout-Out Clip Player Overlay

Play a random clip from the streamers channel that is shouted out.

Notes:

FEATURES:
!watchclip Play a clip that was posted into chat.
!replayso, !soreplay, !clipreplay, !replayclip will replay the previous shout-out clip. Maybe you just have to see that clip again :)
!stopclip to stop/reload the browser source in case a clip is just way too long, cringey or playing at an inappropriate time. Limited to Mods and Streamer. Can also use (!sostop, !stopclip, !clipstop, !clipreload)
Date Range option: This will grab a clip from within the last 5days, 10day, 30days... If no clips exist, then no clip will play. You can enable the "Show the user profile image" to display the users avatar in place of a non-existent clip.
Show clip details panel: This will display a panel in the lower third of the overlay that contains details about the clip. This can use variables:{channel},{title},{game},{creator_name},{created_at}.
Automatically do a shout-out on Raid events.
You can not do a shout-out while another shout-out is playing. The command will simply be ignored.
Multi-Shout-Out (!so @teklynk @mrcoolgamer @streambean) works on a timer using the "Max Duration Time" and will play a shout-out every X seconds.
The most recent "popular" clip may not be the most recent clip. "Popular" is based on the number of views that the clip has.
If you do not want to play clips but still want to "Show chat message", uncheck "Show a random popular clip" and "Show the most recent popular clip".
Be sure to set "Shutdown source when not visible", "Control audio via OBS", "Refresh browser when scene becomes active" on the OBS Browser Source properties.

Custom CSS (Copy and paste into the OBS browser source Custom CSS section and modify as needed. CSS Tutorial)

video {
    width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 10px;
    z-index: -1;
}

#text-container {
    width: 100%;
    position: absolute;
    top: 10vw;
}

.title-text {
    font-family: Basic, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 5vw;
    word-wrap: break-word;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px #000;
}

/* Profile image */
#profile {
    border-radius: 100%;
}

#details-container {
    position: absolute;
    top: 36vw;
    background: #00000090;
    padding: 12px 24px 12px 24px;
    margin-right: 24px;
    border-radius: 0px 24px 24px 0px;
    width: auto;
    animation: fadeout 15s forwards;
}

#details-container .details-text {
    font-family: Basic, Helvetica, sans-serif;
    font-weight: bold;
    word-wrap: break-word;
    color: #fff;
    text-align: left;
    text-shadow: 2px 2px #000;
}

#details-container .details-text.item-0 {
    font-size: 3vw;
    font-weight: bold;
}

#details-container .details-text.item-1 {
    font-size: 2.5vw;
    font-weight: normal;
}

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

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

@keyframes fadeout {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes slide {
    100% {left: 0;}
}

Twitch Shout-out

Shout-Out Clip Player Overlay

Notes:

Options