Live streaming has revolutionized the way content creators engage with their audience, and in the dynamic landscape of online streaming platforms, Kick.com has emerged as a formidable contender. With its enticing array of creator-friendly policies and a lineup of prominent streamers like Adin Ross and Hikaru Nakamura, Kick.com has garnered attention as a platform that could rival the likes of Twitch. As we enter the year 2023, the interest in Kick.com continues to soar, and website owners and content creators are eager to tap into this wave and embed Kick live streams directly onto their own websites.
Kick has struck a chord with creators and viewers alike, thanks in part to its attractive revenue sharing model. By offering a remarkable 95-5 subscriber revenue split, surpassing the industry-standard ratios set by Twitch and YouTube, Kick has positioned itself as a haven for content creators seeking more favorable compensation. Not stopping there, Kick.com also boasts a 100% split on Kicks, their platform’s donation service, allowing creators to receive same-day payouts instead of waiting for monthly remittances. These generous policies, combined with the promise of a steady income based on hours watched and total viewers, make Kick an enticing prospect for content creators looking to expand their reach and monetize their content effectively.
While Kick is still in its beta phase, it currently does not provide a native solution for embedding Kick live streams on external websites. However, fear not, as there are ways to achieve and embed Kick streams on your own website which I am going to detail below. While these techniques require some additional effort and technical expertise, they offer viable alternatives to embed Kick live streams into your website until Kick releases its official embedding functionality.
When Kick releases their own embedding experience, this guide will be updated to reflect those changes.
How to embed Kick Streams on your website with hls.js
HLS.js is a JavaScript library that enables the embedding of Kick content (or any other content) on any website. It provides a solution for incorporating Kick streams into your web pages, even though Kick doesn’t currently offer a native embedding feature. By utilizing hls.js, you can easily create a video player instance, and configure it to play Kick content seamlessly on your website as long as you have the stream URL from Kick.
The first thing you need to do in order to embed a Kick stream on your webpage is obtain the playback_url for the stream from Kick. This can be obtained with a simple call to the Kick API. This can (and should) be automated with some code to ensure the playback_url is always up-to-date and accurate, however you can simply visit the API link below, replacing the username bige with the username of the Kick streamer you want to embed.
https://kick.com/api/v1/channels/bige
In the resulting page, you can use ctrl + f (or a json viewer browser plugin) to find the text playback_url in the page. It should look something like this, with a .m3u8 file extension.
https://fa723fc1b171.us-west-2.playback.live-video.net/api/video/v1/us-west-2.196233775518.channel.aAMMC00nhtv0.m3u8?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzM4NCJ9.eyJhd3M6Y2hhbm5lbC1hcm4iOiJhcm46YXdzOml2czp1cy13ZXN0LTI6MTk2MjMzNzc1NTE4OmNoYW5uZWwvYUFNTUMwMG5odHYwIiwiYXdzOmFjY2Vzcy1jb250cm9sLWFsbG93LW9yaWdpbiI6Imh0dHBzOi8va2ljay5jb20iLCJhd3M6c3RyaWN0LW9yaWdpbi1lbmZvcmNlbWVudCI6ZmFsc2UsImV4cCI6MTY4NDQyMzQyMX0.LbqHGdx2Kj5ZiDhNemF9lDyv_6o3TzWGHfpWNDEZbwBRZGu1v0dWmvxNTH4iarSkfVzFe8DRLxYQBdEnYd1V7uU25n-yB84ZlkXULt-NXb3yr7NoVL1-0c9olBJQ5li9You should then take your playback_url and insert it into code below where is says PLAYBACK_URL HERE.
<!-- Include the hls.js library on your page. This can be done in your page <#head#> tag for better optimisation -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- create an element on the page for which to attach the video embed -->
<div style="text-align:center;margin: 0 auto;">
<video id="video"></video>
<a href="javascript:void(0)" onclick="video.play();">Play video</a>
<a href="javascript:void(0)" onclick="video.pause();">Pause Video</a>
</div>
<!-- run the script to attach the video embed to your video element created above -->
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('PLAYBACK_URL HERE');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
} else {
console.log('hls not supported...')
}
</script>If you copy and paste the above code, with the correct playback_url in place, you should see an embedded Kick experience with both a Play Video and Pause Video button, as you can see below.
Important Note: It is unclear if embedding Kick streams with the method above may be violating Kick’s TOS. If you want to be safe, it may be smarter to wait until Kick release their own embedded Kick experience for you to use.
How to embed Kick Streams on your WordPress website with StreamWeasels Kick Integration
Introducing the Kick Integration Plugin for WordPress, the latest solution that allows you to effortlessly embed Kick content on your WordPress website. With this new plugin, you can seamlessly integrate Kick live streams into your WordPress-powered site with just a few clicks.
Say goodbye to complicated manual embedding processes and hello to a user-friendly interface that simplifies the integration of Kick content. Whether you’re a streamer, gaming enthusiast, or content creator, the Kick Integration Plugin for WordPress will allow you to embed Kick streamers on your WordPress website with just a list of Kick usernames. You can also customise your embedded Kick content by changing things like the number of columns and the colours.
StreamWeasels Kick Integration
As of right now, the StreamWeasels Kick Integration plugin for WordPress is rather limited compared to our other plugins for Twitch and YouTube, but as the Kick API becomes more powerful and better documented over the next few months we hope to improve the plugin with many more options and customisations – to help make it the most powerful Kick Integration plugin on the market.
In Conclusion
Here at StreamWeasels, we feel that Kick is doing a pretty good job and may slowly be becoming a proper competitor to Twitch and YouTube. For that reason we will be focussing more and more on bringing new Kick WordPress products to the market to ensure WordPress users have the ability to quickly and easily embed Kick content on their own WordPress websites.
If you are in the WordPress space and you just want to display Kick content in a professional and consistent manner, let StreamWeasels do the hard work and try out StreamWeasels Kick Integration below.