JS/CSS — Transition effect for looping background video

Liu Ting Chun
2 min readFeb 26, 2022

Using videos as the background is a common practice nowadays for creative web design. However, most videos are not self-looped. There is a flicking of frames when those videos are repeated, which is simply — ugly.

Repeating a video that is not self-looped.

This issue can be solved by simply adding a transition effect at the end of the video, and it is extremely easy to do that. We don’t need any video editing…

Liu Ting Chun

Web developer from Hong Kong. Most interested in Angular and Vue. Currently working on a Nuxt.js + NestJS project.