Learning to add video
I am not a video person. In the past few days I have been working on adding a demo video onto my project's landing page. And I learned a few things.
Creation
Initially there was a part of the video where I wanted to obscure the user logging into the system. This led me down the rabbit hole of choosing a video editor that I can understand and use in a short time. I found a couple of video editors that I was able to use: one is commercial and the other is kdenlive.
I got something working in both, but changed my mind about showing the login screen, so I dropped that section.
And without the need to obscure part of the screen, I found out I could just use Quick Time Player. It has only basic editing capability, but it gets the job done for now.
Streaming
I wanted to get this up and running fast and the fastest way is to use third-party. I tried YouTube and the process was smooth. Nice.
The downside was that I could not figure out how to make the video showing in portrait shape, which is less ideal for my specific purpose. So next I tried Tiktok. Wow, the process is easy with Tiktok. Fantastically easy.
In manual testing, the website felt okay, although the video div was lagging, but everything else was as snappy as usual. So I went into the weekend feeling relieved.
Performance
Come Monday, I was working on something unrelated and clicked on Google Page Speed Insights not expecting anything. To my surprise, I found out the landing page performance had dropped by a wide margin.
Aargh. The script tag that came with Tiktok embed seemed to be the main culprit in a landing page that, so far, has zero JS.
I don't think it is a huge deal at this stage of the project, but decided to investigate hosting the video myself.
I thought about Cloudinary – they have a generous free tier which is ideal for a starter. And then I remembered I looked at imagekit.io in the past and it turns out they just started beta offering for video.
I gave imagekit a spin and was able to host the video on imagekit and embed it on my landing page.
I deployed it and then checked Google Page Speed Insights again. And the landing page is back in good standing. 👍🏽
