DEV Community: pollychekhova

Transparent videos on the web: how to make them and use them in Webflow projects

pollychekhova — Mon, 03 Oct 2022 09:19:42 +0000

Transparent videos are far underused in web projects with complicated designs. They particularly shine:

When a complicated animation needs to be shown (such as a product mockup, elements of UI, etc.) without limiting background colors and gradients.
When multiple videos need to be layered.

Here's an example of a creative concept that would be impossible to implement without video transparency: Webflow page

In this article, you'll learn how to recreate this page so that it works in any modern web browser like Chrome, Safari, Firefox, and Edge.

Transparent videos 101 and why they are rarely used

Long story short: you need to use certain video formats to enable transparency. Of course, Apple and Google couldn't agree on supporting the same video format, so you have to render two video files:

HEVC with Alpha for Safari;
VP9 with Alpha for Chrome.

Some video editing programmes can render HEVC with Alpha, yet they completely ignore the VP9 format (and Google Chrome users). And that's exactly where the problem lies: you have to convert HEVC to VP9, which often doesn't work as smoothly as we'd like. This article shows a way to reliably render both HEVC and VP9 videos by using a sequence of PNG images as a proxy.

Step 1: Create a video with a transparent background.

If you already have such a video, you can continue with step 2. If you have a regular video with background, you need to remove it. A few tips on how to do that:

An easy way with mostly good (but not guaranteed) results: a tool like unscreen.com.
A bit more complicated but with guaranteed results: the Rotobrush tool in After Effects. Here’s a good tutorial on how to use it.

Step 2: Render the video as a PNG sequence in AE.

Add your composition to a render queue and set the export format as 'PNG sequence'. Set the channels setting as RGB + alpha.

Set up a naming convention in the ‘Output to’ setting as



video_[###].png

You'll end up with a sequence of PNGs named image-001.png, image-002.png and so on.

Step 3: Render transparent video for Chrome, Safari, Firefox and Edge using FFMPEG.

Chrome supports transparency for WEBM videos with VP9 encoding. To render such a video, use this command. If you've used a different naming pattern for your png files, don't forget to change the 'video_*.png' piece to match it.



ffmpeg -y -pattern_type glob -framerate 25 -i "video_*.png" -c:v libvpx-vp9 -auto-alt-ref 0 output.webm

Transparent videos in Safari only work with HEVC videos. To render a HEVC video, use this command:



ffmpeg -y -pattern_type glob -framerate 25 -i "video_*.png" -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 1 -vtag hvc1 output.mov

If you've used a different naming pattern for your png files, don't forget to change the 'video_*.png' piece to match it.

Step 4 (optional): How to fix the bug in After Effects that the background is 'half' transparent.

In some rare cases, Google Chrome may play your transparent videos as if they still had a background. This can happen because the background pixels are not literally deleted but rather set as 'hidden'. You can check if transparency works in Chrome in your case by uploading the video to Google Drive and then playing it with the built-in player.

If you've encountered this problem, you can remove the background completely with the app Imagemagick. The easiest way to install it is via Homebrew:



brew install imagemagick

Imagemagick comes with a number of tools to process images. The tool we need in our case is called Mogrify. Open Terminal in the folder with the png sequence and try



mogrify -alpha on -background none -flatten *.png

Re-render the videos (as in Step 3) and check if Mogrify did the trick.

Step 5: Using the videos on the web.

Now that you have both MOV and WEBM files, it's time to put them online. Upload the videos to your cloud storage/web server and use this code snippet wherever you need the video.



<video width="600" height="100%" autoplay loop muted playsinline>

  <source 

    src="https://path-to-video.com/movie-hevc.mov" 

    type='video/mp4; codecs="hvc1"'>

  <source 

    src="https://path-to-video.com/alpha-demo/movie-webm.webm" 

    type="video/webm">

</video>

Demo page HTML.

Here's the exact code used on the Webflow demo page.



<video width="600" height="100%" autoplay loop muted playsinline>

  <source 

    src="https://path-to-video.com/movie-hevc.mov" 

    type='video/mp4; codecs="hvc1"'>

  <source 

    src="https://path-to-video.com/alpha-demo/movie-webm.webm" 

    type="video/webm">

</video>

Quick recap.

Remove the background in your video or create a new one from scratch.
Export the video as a PNG sequence.
Render two videos: HEVC with Alpha for Safari and WebAssembly-based browsers, and WEBM with Alpha for Chrome and Chromium-based browsers.
Upload the videos to cloud storage.
Embed the videos with the tag including two tags including URLs of HEVC and WEBM videos.

How applicable Webflow really is: for which projects it shines and which projects should avoid it

pollychekhova — Tue, 30 Aug 2022 06:00:25 +0000

Webflow and no-code are in vogue. No-code tools are often seen as the ideal solution for building MVPs (or even full-fledged products), content projects, blogs, etc. Among all no-code tools, Webflow is perhaps the most widely used.

However, like any no-code tool, Webflow has its limitations that you should be aware of before you decide to use it.

As a lead developer in a no-code agency, I have developed a variety of products based on Webflow and have gained extensive expertise in its advantages, disadvantages, and limitations.

In this article, we will discuss for what type of projects Webflow is the be-all and end-all and which projects should be implemented with other tools.

Webflow is great for

✅ Marketing pages

This is where Webflow excels. With Webflow, marketing and growth departments can create pages of any complexity in a matter of days. If the initial A/B test is unsuccessful, content and layout can be changed in minutes. Tag managers, analytics apps, pixels - all can be installed directly from the settings page. Moreover, each page works as fast as if it was built with vanilla HTML+CSS+ JS.
Example: https://new.backer.com/

✅ Websites for start-ups

If you're a startup, 99% of the time you need a bling homepage and 10 more pages rambling about your mission and office location. Maybe a few blog pages on top of that. Webflow is perfect for this: The entire site can be created in a matter of days. The built-in CMS functionality helps create templates to facilitate the cloning of similar pages. Again, everything works as fast as if it was done by a dedicated front-end engineer.
Example: https://www.onefor.com/

✅ HTML creation for a front-end team

It may sound obscene, but Webflow is handy for creating HTML. This often works if you don't want to spend a front-end engineer's precious time converting a Figma design to HTML, but do it with Webflow. The result can then be exported as HTML code that can be enhanced with custom JS.

✅ Awwwards-like sites

Webflow is a Swiss Army knife for creating complex, rich animations and interactions and supports Lottie out of the box. Everything can be transformed and styled based on scroll progress. Any element can have an interaction linked to any other element. If that's not enough, you can expand the possibilities even further by adding any JS libraries.
Example: https://www.rocketair.com/

✅ Niche marketplaces

With built-in CMS features and expanded third-party integration support through Zapier and Integromat, Webflow is a powerful solution for building a niche marketplace.
Cons: The Webflow CMS only supports 10k items. This sounds like a lot, but it can drastically limit scalability. This limitation can be lifted by connecting Webflow to external databases though.
Example: https://www.unicornfactory.nz/

✅ Blogs

Similar to what was said for marketplaces, the built-in CMS + integrations would suffice any request you might have for a blog. 10k CMS items should be enough for most blogs and is hardly a limitation. The SEO friendliness of blogs built on Webflow is above average.
Example: https://www.julian.com/

✅ Mini-games and quizzes

Webflow is handy for implementing mini-games like Wordle and any quiz for which Typeform isn't enough.
Example: https://artsnob.webflow.io/

Webflow is still an option, but the alternatives are better

❌ Web and mobile apps

Even though Webflow is a good solution for the front-end of your app, it lacks basic built-in back-end features, forcing you to look for compromises. Its CMS isn't a true substitute for a full-fledged database, and even basic app features like authorization are difficult to implement. Zapier and Integromat integrations can't fully fill this gap.

❌ E-commerce

Shopify and other e-commerce-only platforms are far superior to Webflow in all areas except the ability to customize the design. If you want to sell more than 10 items, you should use Shopify.

❌ Content projects with a lot of content

Webflow limits of 10,000 CMS items and 200 pages are fatal for ambitious content projects. Even though the limit of 10,000 CMS items can be circumvented, it makes more sense to resort to solutions that don't force you to look for workarounds. Till the end of the year Webflow should release a significant improvement, but just for enterprise plans for now (which is ain't cheap).

About the Author

Polly Chekhova is a Web Developer and Designer focusing and specializing in building websites and apps with no-code tools. A firm believer in a human-centered approach, she works daily to create meaningful services in the fields of Women Tech and Health Tech, and to foster collaboration between all disciplines for the greater good.
Outside of work, she's a cat mum, a mentor to other women in tech, and has a whole lot of other cool roles. She can often be found playing tennis.