In this post, we'll learn how to embed an HTML5 video player on an HTML document and define custom controls that are independent of the browser defaults.

Build a Custom HTML5 Video Player with JavaScript

Adding subtitles seems automatic when using video players but is a complex task when we have to do it in our own apps. Let us learn how we can easily do them without requiring expensive software or server-driven solutions.

Adding subtitles to video files in NuxtJS

Boost e-commerce conversion using shoppable videos. Learn to utilize a shoppable video in Next.js

Using Shoppable Video in Next.js

This post demonstrated how to create a video player and handle player events with React Player using Gatsby.js.

Simulate a Streaming Event in Gatsby.js

As e-commerce and video consumption adoption increases, an interesting intersection of the two is emerging. Giving the users an in-depth experience of the product by displaying not just static images but a sample usage/adoption video. These are called Shoppable videos. Let us learn how we can add them to our Nuxt.Js websites.


Adding Shoppable Videos to Your NuxtJS Website

This post will discuss how to create a video thumbnail with a preview on hover in Nuxtjs.

Video thumbnail with preview on hover in Nuxtjs

Insert video Ads in between videos, store the videos in cloudinary, and offer the user a skip ad button while the Ad is playing.


Insert Ads in between videos  using Next.js

Understand to use the Cloudinary video player to track and report video events and analytics to Google analytics.

Adding google analytics to a video in NuxtJS

For video-intensive applications, video recommendations are a standard feature to ensure a smooth user experience. We see recommendations seamlessly function in video apps such as   Netflix and Youtube. Let us learn how we can add them into our own custom applications.


Displaying video recommendations in NuxtJS

Building a Video Editor

In this post, we will go through the process of embedding a YouTube player in a React application using the react-youtube package. We will also look at some of the options for personalization. 

Embed a YouTube Player into a React App

Navigating Videos With Auto Tagged Markers Using Next.js, Cloudinary, and Google's Video Intelligence Api

Navigating Videos With Googles Video Intelligence 

Learn to create a blog with Gatsby.js and interactive content including Video with MDX

Dynamic Video blogs with Gatsby.js and MDX

Learn to build a video blog in Next.js using Markdown and Cloudinary

Creating a Video Blog in Next.js

This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.

Feedback Form Trigger from Video Events in Next.js

The standard web streaming platforms such as Zoom and Google Meets are good platforms but there are many cases we want to have control over the user experience our event hosts and attendees have. Let us see how we can create our own live stream using WebRTC.

Creating a live stream on WebRTC using NuxtJS

Video subtitles provide a better viewing experience and also improve accessibility for persons with disabilities. Manually adding subtitles to videos, however, proves to be repetitive, boring, and a lot of work. Luckily, there’s a way we can automate this. In this tutorial, we’ll take a look at how to automatically add subtitles to videos using Google video intelligence, Cloudinary, and Next.js.

Subtitling videos using Google Video Intelligence

Floating videos are a common sight whether on YouTube, Facebook, or Twitter. In this tutorial, we explore how we can easily create such a floating video player on a Nuxt.Js website.



Floating Video Player

Many events nowadays such as product launches occur online nowadays. You want to give your attendees a live-event feeling however to make the most of the time, you want to pre-edit the video as well. Let us learn how we can live stream pre-recorded content to achieve this.

Simulating a live stream in NuxtJS

How to add a YouTube Video Player

Learn to replicate the CTA options shown at the end of youtube videos

Building a Youtube-Style Post-Video Overlay CTA

Trimming videos can be challenging especially if we want to do it programmatically. Using server-side tools can be too heavy for simple JAMStack applications. In this tutorial, we learn how we can trim videos easily programmatically.


Video trimming using Nuxt.Js

Apply the CCTV grayscale and noisy effect to any video using Cloudinary and Svelte.js


Creating CCVT Video Effect

Track analytics on your video content on Gatsby.js sites using Google analytics on the Cloudinary video player

Capture Video Analytics in Gatsby.js Sites

Learn to autoplay a video when scrolled into view on a Next.js landing page

Autoplay a Video on a Next.js Landing page

Creating a Video Thumbnail Previews in GatsbyJS

Videos enable us to establish authority and a more personal feel to your message. It enables us to connect with the emotional levels of our audience. React is a great JavaScript library for describing User Interfaces that change over time. To create video content programmatically with React.js

Creating Videos Using React.js and Remotion

HTML allows us to easily embed video players on web pages. Video playlists however are outside of the scope of the standard Video element. Let us explore how we can add video playlists on our Nuxt.Js websites


Embedding video playlists

This post demonstrated how to create in-video ads in Next.js.

Create In-Video Ads in Next.js

This article explains how you can use one video as a background for another to create a cohesive video useful in cases such as presenting video animation and content creation.

Video merging with NextJS

This article discusses implementing and gathering video analytics data from a video on a website built with Gatsby.js.

Add Google Analytics to a Video in GatsbyJS

Many organizations and groups are now building custom learning management systems, but many are designed for textual content. This article teaches how to build a simple video course platform using Nuxt.js, Cloudinary, and Forestry.io.
