Integrate RumbleTalk Group Chat with Vimeo

UpdatedAugust 31, 2021

byMary Alice

Vimeo is an American video hosting, sharing, and services platform headquartered in New York City. Vimeo focuses on the delivery of high-definition video across a range of devices. Vimeo’s business model is through software as a service.

Just like from our previous tutorial for integrating YouTube video with Rumbletalk, this time we are going to use a video that is being hosted from Vimeo.

Let’s assume you have a Rumbletalk account already. Just follow these steps.

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: Create account from Vimeo

Go to the Vimeo site and sign up. Click the Join button.

You can either sign up using email (just enter your name, email, and password) or you can use your Google account. There will be questions on how you will be using Vimeo. Answer those or skip answering.

After clicking Skip, you can see the several plans that Vimeo is offering. You can also skip that and continue with the basic plan. Just click No thanks.

Once you are on the dashboard, click upload and choose the video that you are going to upload in Vimeo.

You can either choose from these choices that are being highlighted, but we are going to select choose a file for this.
After clicking Choose a file, just select any video that you want to upload from your computer.

Vimeo will show you the progress of your upload and once the file is ready, you can put any title that you want and add a description (optional). After that, click Embed.

Now that we have the embed code of RumbleTalk and Vimeo, you just need to put them in an HTML file and host it on your website. Here’s a sample of Vimeo video and RumbleTalk chat side by side.

Here’s the sample code for HTML.

<body>
<div class="wrapper">
	<div class="half" style="--aspect-ratio: 16/9;">
		<iframe src="https://player.vimeo.com/video/521990143?badge=0&autopause=0&player_id=0&app_id=58479" 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-f5297a425d45809606c27fc2a8e9f2b6"></div>
		<script src="https://rumbletalk.com/client/?wddBi6-Q"></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>

The only difference from embedding a YouTube video and Vimeo is that you need to create an account to Vimeo first, but on YouTube, you can get the embed code right away.

If you have more concerns, feel free to contact us.

Integrate RumbleTalk Group Chat with Vimeo

Categories