Youtube Live chat Highlight for Atem Mini (Chroma Key method)

YouTube-chat.css

body {
    background-color: #000;
}
yt-live-chat-app {
	margin-top: 400px;
	height: calc(100vh - 400px) !important;
}
.btn-clear {
	position: absolute;
	z-index: 99999;
	bottom: 70px;
	right: 20px;
	font-size: 30px;
}
.show-comment {
    background-color: green !important;
}
highlight-chat {
	font-family: Avenir Next;
	font-weight: 600;
	box-sizing: border-box;
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 400px;
	z-index:99999999999;
	overflow: hidden;
	margin: 0px;
	background-color: #000;
	background-color: #27ff00;
	color: #fff;
	font-size: 30px;
}
.hl-c-cont {
	position: absolute;
	left: 150px;
	bottom: 50px;
	padding: 20px;
	width: 100%;
	margin: 0 auto;
	transition: .5s all cubic-bezier(0.250, 0.250, 0.105, 1.2);
}
.hl-c-cont.fadeout {
	transform: translateY(600px);
}

.hl-name {
	position: absolute;
	top: -20px;
	left: 50px;
	font-weight: 700;
	background: #ffa500;
	color: #222;
	padding: 10px 20px 10px 40px;
	border-radius: 0 50px 50px;
	z-index: 1;
}
.donation {
	position: absolute;
	display: block;
	text-align: center;
	left: 8px;
	top: 70px;
	z-index: 3;
	min-width: 128px;
	border-radius: 10px;
	padding: 30px 5px 0;
	overflow: hidden;
background: linear-gradient(to right, #BF953F, #ede599, #B38728);
	color: #5a4211;
	transform: rotate(-0deg) translateX(-50%);
	
}
.donation::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	font-size: 18px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.23);
	border-radius: 10px 10px 0 0;
	padding: 5px 0 0;
	display: block;
	content: 'SUPERCHAT';
	color: #fff;
}
.sticker.donation::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	font-size: 18px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.23);
	border-radius: 10px 10px 0 0;
	padding: 5px 0 0;
	display: block;
	content: 'STICKER';
	color: #fff;
}
.donation::after {
	content: '';
	position: absolute;
	top: -50%;
	left: 0;
	height: 200%;
	width: 1px;
	background-color: #fff;
	box-shadow: 0 0 20px 20px #fff;
	opacity: 0.7;
	transform: rotate(9deg) translate3D(250px, 0, 0);
	animation: superchat 3s ease-in-out infinite;
}
@keyframes superchat {
	from {
		transform: rotate(9deg) translate3D(-250px, 0, 0);
	}
}

.hl-message {
	position: relative;
	display: inline-block;
	font-size: 45px;
	font-weight: 600;
	padding: 20px 40px 20px 70px;
	background-color: #222;
	max-width: calc(100% - 350px);
	min-width: 100px;
	border-radius: 20px;
}
.hl-message:empty {
	opacity: 0;
	height: 1em;
}
.hl-message img {
	width: 50px;
	vertical-align: middle;
}

.hl-img {
	position: absolute;
	top: -40px;
	z-index:1;
	left: -60px;
	width: 128px;
	height: 128px;
	background-color: white;
	border: 4px solid orange;
	border-radius: 50%;
	padding: 0px;
}
.hl-img img {
	display: block;
	border-radius: 50%;
	width: 100%;
	opacity: .9;
}
.newmember .hl-message {
	background-color: #257891;
}
.newmember .hl-name {
	background-color: #70bad0;
}
.newmember .hl-img {
	border-color: #70bad0;
}

YouTube-chat.js

$("body").on("click", "yt-live-chat-text-message-renderer,yt-live-chat-paid-message-renderer,yt-live-chat-membership-item-renderer,yt-live-chat-paid-sticker-renderer", function () {
	$(".hl-c-cont").remove();
		var chatname = $(this).find("#author-name").html();
		var chatmessage = $(this).find("#message").html();
		var chatimg = $(this).find("#img").attr('src');
		var chatdonation = $(this).find("#purchase-amount > yt-formatted-string").html();
		var chipdonation = $(this).find("#purchase-amount-chip").html();
		var chatmember = $(this).find("#header-subtext").html();
		chatimg = chatimg.replace("32", "128");
		chatimg = chatimg.replace("64", "128");
		var hasDonation;
		if(chatdonation) {
			hasDonation = '<div class="donation">' + chatdonation + '</div>';
		}
		else if (chipdonation) {
			hasDonation = '<div class="donation sticker">' + chipdonation + '</div>';
			chatmessage = '';
			
		}
		else {
			hasDonation = '';
		}
		var newMember;
        if(chatmember) {
			newMember = 'newmember';
		}
		else {
			newMember = '';
			chatmember = '';
		}
	
  	$(this).addClass("show-comment");
		$( "highlight-chat" ).append('<div class="hl-c-cont fadeout ' + newMember + '"><div class="hl-name">' + chatname + '</div>' + '<div class="hl-message">' + chatmessage + chatmember + '</div><div class="hl-img"><img src="' + chatimg + '"></div>' + hasDonation + '</div>').delay(10).queue(function(next){	
		$( ".hl-c-cont" ).removeClass("fadeout");
			next();
		});	
 	});

$("body").on("click", ".btn-clear", function () {
	$(".hl-c-cont").addClass("fadeout").delay(300).queue(function(){
    $(".hl-c-cont").remove().dequeue();
	});
});

$( "yt-live-chat-app" ).before( '<highlight-chat></highlight-chat><button class="btn-clear">CLEAR</button>' );

Use with styler Pro Extension: https://chrome.google.com/webstore/detail/styler-pro/hbhkfnpodhdcaophahpkiflechaoddoi?hl=en

Instruction: https://youtu.be/ROSdJZhEt68

UPDATE:
I've tweaked the code to support new "youtube channel members" joining. Superchat stickers can also be highlighted, althought only with name and donation amount (Might work on the actual sticker in the future).
I also tweaked the design of the message making it look a bit slicker (IMO), as well as the positioning of the message in the green box to always place bottom left, and then adjust automatically depending on the length of the chat message.
Lastly, to get rid of the ugly green fringes when chroma keying, I changed the color of the green which seem to have fixed that.
(I've also prepared the code for use with Luma, only thing you need to change is the green background to 100% black (#000). Only problem I found with using Luma is that I can't use the KEY on/off button on the Atem mini to turn it on or off. )
Example of all changes can be seen in a stream I did on my main chanel: https://youtu.be/sHcGzlCInWI