A more performant and privacy-friendly way to embed Rumble videos.
Demos: https://grfr.ge/lite-rumble-embed/
lite-rumble-embed
is forked from Paul Irish's excellent lite-youtube-embed.
Unlike lite-youtube-embed
which focused primarily on performance, this version for Rumble focuses more on privacy and comes with some initial ease of use trade-offs.
Things that are not implemented compared to lite-youtube-embed
:
- thumbnail fetching. Rumble does not use predictable conventions for thumbnail URIs.
- player API. Just doesn't interest me.
Additional implementation:
- choose classic or Rumble logo play button
- specified width and height will be honored when loading the iframe
The relevant Rumble video information needed for lite-rumble-embed
:
- videoId
- embedId
- thumbnail URL
While Rumble may have a philosophy more closely aligned to the ideals of a free and open internet than Youtube, it is unfortunately miles behind Youtube in terms of usability - for content consumers and producers alike.
See ./util/
for a quick and dirty tool for fetching the required information from the video ID.
Pay attention to the difference between videoId
and embedId
. If you mix up the two, it's likely your video embed will report no video found.
Use the lite-rumble-embed
npm package or download from this repo and use src/
.
To use the custom element you will need to:
- Include the
lite-rumble-embed
stylesheet and script within your application - Get the shortcodes the video you want to embed (see below)
- Use the
lite-rumble
tag via HTML or JS - Be happy that you're providing a better user experience to your visitors
<!-- Include the CSS & JS.. (This could be direct from the package or bundled) -->
<link rel="stylesheet" href="node_modules/lite-rumble-embed/src/lite-rumble-embed.css" />
<script src="node_modules/lite-rumble-embed/src/lite-rumble-embed.js"></script>
<!-- Use the element. You may use it before the lite-rumble-embed JS is executed. -->
<lite-rumble
videoid="v4ndjb2"
embedid="v4ksbkt"
title="Play: ModelGPT - the world's first fully AI-powered mechanical keyboard"
style="background-image: url('https://ak2.rmbl.ws/s8/1/-/N/A/W/-NAWq.qR4e-small-ModelGPT-the-worlds-first-f.jpg')"
></lite-rumble>
Use this as your HTML, load the script asynchronously, and let the JS progressively enhance it.
Basically the same thing except an anchor and label are displayed before the script is loaded. If the video placeholder is clicked before the script is loaded, it will open the video in a new tab rather than in an iframe.
<lite-rumble
videoid="v4ndjb2"
embedid="v4ksbkt"
classicButton
title="Play: ModelGPT - the world's first fully AI-powered mechanical keyboard"
style="background-image: url('https://ak2.rmbl.ws/s8/1/-/N/A/W/-NAWq.qR4e-small-ModelGPT-the-worlds-first-f.jpg')">
<a href="https://rumble.com/v4ndjb2" class="lrmb-playbtn" title="Play Video">
<span class="lrmb-visually-hidden">Play: ModelGPT - the world's first fully AI-powered mechanical keyboard</span>
</a>
</lite-rumble>
Just add noinline
. You can also leave out the embedid
in this case.
<lite-rumble
videoid="v4ndjb2"
noinline
title="ModelGPT - the world's first fully AI-powered mechanical keyboard"
style="background-image: url('https://ak2.rmbl.ws/s8/1/-/N/A/W/-NAWq.qR4e-small-ModelGPT-the-worlds-first-f.jpg')"
></lite-rumble>
Other third-party facades
- Lite Youtube Embed:
paulirish/lite-youtube-embed
- Lite Vimeo Embed:
luwes/lite-vimeo-embed
- <lite-vimeo>:
slightlyoff/lite-vimeo