Introduction

During the process of creating a website, I came across a common yet frustrating challenge: incorporating a video as the background. Personally, I wasn't initially keen on the idea of using video backgrounds, but I couldn't deny that they look visually appealing. Despite trying various conventional approaches and experimenting with workarounds, I couldn't achieve the desired results.

The Problem

The main issue I encountered was making the video background work on iOS/Safari browsers.

The Solutions:

1. Using Pure HTML

2. Using Chakra-ui and React

It's as simple as that! These methods will allow you to seamlessly incorporate video backgrounds and enhance the visual appeal of your website for iOS/Safari users. Give it a try and enjoy the results. Happy coding!