How To Integrate RumbleTalk Group Chat with YouTube Video

UpdatedAugust 31, 2021

byMary Alice

Easily watch videos from YouTube while using the RumbleTalk chat feature.

If you are watching a documentary or a series while chatting with your friends, integrating YouTube to Rumbletalk is the best solution to your situation.

Let’s say that you have a RumbleTalk account already. Here are the steps that you need to follow.

PART A: Add RumbleTalk Group Chat Embed Code to your Website

Go to your RumbleTalk admin panel, and then click on the Embed tab.
On the embed page, click Get Code.
Copy the given code and paste it anywhere you want to appear on your website.

(click here on How to Embed RumbleTalk Group chat to any website)

PART B: Add YouTube embed code to your website

1. Go to YouTube and look for the video you wanted to embed on your website.

2. Once you are in the video, click the share button.

3. After clicking the share button, choose Embed and copy the embed code.

4. Now that you have the embed code of both RumbleTalk chat and YouTube video, you just need to merge them in an HTML file and do some tweaking in the sizes so that it will look like this.

Here’s the sample code for HTML.

<body>
<div class="wrapper">
	<div class="half" style="--aspect-ratio: 16/9;">
		<iframe src="https://www.youtube.com/embed/M2h8UyjzuJU" width="100%" height="100%" frameborder="0" scrolling="no" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
	</div>
	<div class="half" style="--aspect-ratio: 16/9;">
		<div id="rt-195734457f42f5a13da7bca571d96324"></div>
		<script src="https://rumbletalk.com/client/?JGf6K~l9"></script>
	</div>
</div>
</body>

Here’s the sample code for CSS.

<style type="text/css">
.wrapper { display: flex; max-width: 1600px; margin: auto; }
.half { width: 50%; }

[style*="--aspect-ratio"] > :first-child {
	width: 100%;
}
[style*="--aspect-ratio"] > img {
	height: auto;
}
@supports (--custom:property) {
	[style*="--aspect-ratio"] {
		position: relative;
	}
	[style*="--aspect-ratio"]::before {
		content: "";
		display: block;
		padding-bottom: calc(100% / (var(--aspect-ratio)));
	}
	[style*="--aspect-ratio"] > :first-child {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
}
</style>

Embedding a YouTube video together with your RumbleTalk chat is that easy. You can now watch your favorite YouTube video while chatting to your peers. If you have any questions about RumbleTalk chat or embedding it, don’t hesitate to contact us.

How To Integrate RumbleTalk Group Chat with YouTube Video

Categories