How to Add RumbleTalk Chat to Any HTML5 Video Player
If you host your own video files or use a custom video player on your website, you can still add a RumbleTalk live chat alongside it. RumbleTalk works with any HTML5 video player — whether it is a plain browser <video> tag, a self-hosted player, or a third-party player library like Video.js, Plyr, or MediaElement.js.
This guide shows you how to place a RumbleTalk chat room next to any HTML5 video player on your webpage.
Part A: Get Your RumbleTalk Embed Code
- Log in to your RumbleTalk admin panel.
- Select the chat room you want to use alongside your video.
- Click the Embed tab.
- Copy the embed code snippet provided.
Part B: Set Up Your HTML5 Video Player
If you are using a plain HTML5 <video> tag, your video embed will look something like this:
<video controls width="100%">
<source src="https://your-domain.com/your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>If you are using a player library such as Video.js, Plyr, or MediaElement.js, follow that library’s own embed instructions to get your player code. The integration with RumbleTalk works the same way regardless of which player you use.
Putting It Together: Side-by-Side Layout
To display your video and RumbleTalk chat next to each other, wrap both in a simple flex container:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
}
.video-wrapper {
flex: 2;
}
.chat-wrapper {
flex: 1;
height: 360px;
}
.chat-wrapper iframe {
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.chat-wrapper {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Your HTML5 Video Player -->
<div class="video-wrapper">
<video controls width="100%">
<source src="https://your-domain.com/your-video.mp4" type="video/mp4">
</video>
</div>
<!-- RumbleTalk Chat -->
<div class="chat-wrapper">
/* Paste your RumbleTalk embed code here */
</div>
</div>
</body>
</html>The video sits on the left and the chat on the right. On mobile screens, the @media breakpoint stacks them vertically so the layout remains usable on smaller devices.
Using a Player Library? Just Swap the Video Block
If you are using a library like Video.js or Plyr, replace the <video> block in the example above with your player’s own embed code. The RumbleTalk chat block and the surrounding layout stay exactly the same. For example, with Plyr:
<!-- Plyr CSS -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">
<!-- Plyr Player -->
<div class="video-wrapper">
<video id="player" controls>
<source src="https://your-domain.com/your-video.mp4" type="video/mp4">
</video>
</div>
<!-- Plyr JS -->
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script>const player = new Plyr('#player');</script>The rest of the layout — including the RumbleTalk chat wrapper — remains unchanged.
Why Add a Live Chat to Your Video?
- Keep viewers on your site — give your audience a place to react and discuss without leaving your page.
- Works with live streams and recorded video — use the chat for live watch events or as a Q&A space for on-demand content.
- No dependency on the video player — RumbleTalk runs independently, so it works with any player, any format, and any hosting setup.
- Full moderation controls — approve messages, mute users, pin announcements, and export transcripts after the session.
If you have any questions or run into issues, feel free to contact our support team.
Yes. RumbleTalk is completely independent of the video player. As long as you can embed both on the same webpage, the integration works — regardless of where your video is hosted.
RumbleTalk is compatible with any player library, including Video.js, Plyr, MediaElement.js, Flowplayer, and others. Simply place the RumbleTalk embed code alongside your player code using a side-by-side layout.
Yes, if you include the responsive CSS breakpoint shown in the example. Without it, the side-by-side layout may be too narrow on small screens. The breakpoint stacks the video and chat vertically on mobile.
Yes. If your HTML5 player is streaming a live HLS or DASH feed, RumbleTalk chat works alongside it in exactly the same way. The chat is live and real-time regardless of the video source.
No special configuration is needed. Copy your embed code from the RumbleTalk admin panel and paste it into the layout. You can then apply your usual RumbleTalk settings — moderation, access control, design — from the admin panel as normal.
