- 4 min to read
Videos on Jamstack Websites?
Jamstack and video. How do they work together?
By Nebojsa Radakovic
In the last few years, Jamstack has become one of the most popular web development practices. Although some web developers were skeptical at the beginning, the flourishing Jamstack ecosystem proves that it is far from an internet fad with benefits too good to miss.
Each day, our browsers get updated with new capabilities, we get new APIs, the number of headless CMS providers is increasing, and the number of static site generators has never been higher.
These APIs push wider adoption of Jamstack since they allow incorporating additional functionalities into our static websites such as forms, search, comments, or videos, today’s topic. On the other hand, static site is the source of one of the biggest Jamstack myths, that no dynamic elements can be used on Jamstack websites.
Let’s start by debunking that myth because Jamstack can handle any dynamic content with ease, including videos.
Sign up for Bejamas newsletter.
First-hand web development case studies and topics explained!
Jamstack = static, but also dynamic
To start with, yes - the main Jamstack postulation is that these websites are served directly from a Content Delivery Network (CDN), removing the need for a server (in the traditional sense). As such, the end product of a Jamstack approach are static files (yes, I know this is an oversimplified view. Check Jamstack explained post for a better one).
This, however, doesn’t mean that you can’t incorporate dynamic elements into the website, because in most cases, you are using third-party APIs that deliver different functionalities without servers.
Various APIs, and this number is growing rapidly, allow you to integrate dynamic functions such as comments or forms into your static website without losing much of that Jamstack speed or simplicity.
However, you do need to be careful. By adding too many APIs or dynamic functionalities, you could end up defeating the purpose of Jamstack by complicating the way your website works and slowing it down. In some cases, e.g., websites that need a lot of user data, Jamstack may not be the best option. If you’re unsure of whether it is right for you, I always recommend talking to experts.
As far as videos go, you’ll be just fine.
Video, the main source of entertainment in 2021
In the past decade, digital video has rapidly become one of the most valuable marketing assets that companies can employ in their strategy.
Users prefer watching videos, nothing can quite showcase your product better than a video, and videos seem to sell better than the advertising staples of today.
To illustrate, 74% of marketers say video has better ROI than images, while 68% say video has better ROI than Google Ads. Those numbers are huge and make a clear case that businesses should not miss out on videos.
Thankfully, you can easily add them to your Jamstack website: either self-hosted with a video player or through a streaming solution. Let’s go through some of the solutions you can use.
How can you use videos on your Jamstack website?
JW Player
JW Player is one of the best web players today. It is fast, flexible, and reliable. Use your own hosting or use the JW Player CMS to store and deliver the content to your website via APIs. Adaptive streaming is available!
JW Player also offers fully customized branding with CSS customization that you can use to adjust the color, speed, thumbnails, and more.
VideoJS
VideoJS is the world’s most popular open-source HTML5 video player framework that you can use for your self-hosted video, even those on YouTube or Vimeo. Adaptive streaming that adjusts the video quality to the viewer’s bandwidth is available here, as well.
Because it’s open-source, the VideoJS blooming community delivers updates and upgrades regularly, and it is ready to help should you run into any issues.
Cloudinary Video
Cloudinary is one of the most powerful web video solutions out there. It lets you leverage their APIs and webhooks to easily integrate with your tech stack, whatever that may be.
You are free to select your preferred CDN - Akamai, Fastly, or CloudFront, and you can even use their centralized library for your videos.
We use Vimeo. A couple of reasons for it. First, their free quota is generous enough for our needs. It is easy to use and set up. Basically, we upload videos to Vimeo and then render them using react-player. And finally, free comes without ads...unlike with others.
api.video
api.video is a popular end-to-end video service that lets you host videos and use their video player or only use the player for streaming.
The video is optimized, the APIs allow for the customization of the video player, and it’s one of the simpler tools to use on the market.
Mux
Mux, whose tagline is the API to video, is one of the more specialized tools that provide the API that ingests your hosted video, creates the video asset, and prepares it for streaming.
They power the videos for many big websites, and if you know that what they offer is specifically what you need, you won’t be making a mistake.
Twilio
If you’re looking to add video chat to your website, then Twilio may be right for you.
They provide easy-to-scale, fast, bandwidth-optimized, and customized video SDKs to help you build memorable video experiences, whether one-to-one or one-to-many.
Vonage
Vonage provides the same type of service Twilio does.
Their video API helps you build an interactive video call experience on any device on the WebRTC industry standard.
If you wish to test it first, Vonage offers a free trial with no credit card required.
YouTube Embeds
If you’re okay with integrating video as a static element on your website, then you’ll be good by just copying the iFrame code from YouTube.
On the other hand, depending on the static site generator you’re using, you may be required to code the functionality or install one of the embed plugins (here’s one for Gatsby, for example) to provide a dynamic video.
The Takeaway
It comes as no surprise that video is dominating the digital marketing landscape. Aside from their popularity (everybody loves videos), videos are an incredibly versatile content tool. It has a better social reach and the likelihood of social share than any other piece of content. In case you’re already going the Jamstack route and have to choose one of the solutions from above, either ask an expert or analyze options by yourself.
Things to keep in mind while considering are whether you want to host the video or not, whether you already have a video player, what your tech stack is (the SSG of your choice and headless CMS), what your preferred CDN is, and whether a certain solution is compatible with it. Finally, what types of videos do you need on your website.
On top of it all, it is good to know some CMSs and ecommerce solutions have a built-in video solution that allows you to do all sorts of things with videos in their admin area.
Good luck!
Need a custom web dev team to back your ideas and bring them to life? Let’s talk.
👉BOOK A MEETING today and learn more about what we can do for you and your business.
