How can I get CSS blend modes to work on a background video element in Webflow? Is it possible to remove the black background in the video and show only the smoke over the image? Also, why won't the video autoplay on an iPhone running iOS 10.2?

You’re trying to apply CSS blend modes to a background video in Webflow, remove the black background (presumably to isolate smoke), and wondering why the video won’t autoplay on iOS 10.2.

1. Using CSS Blend Modes on a Webflow Background Video

• Webflow allows you to apply CSS blend modes using the Mix Blend option found in the Style panel.
• Select the background video element or its container and scroll to Effects → Mix Blend and choose a mode like Screen, Lighten, or Overlay.
• These modes affect how the video blends with elements behind it. If the video has a solid black background, modes like Screen or Lighten can help eliminate black areas.

2. Removing the Black Background from the Video (Smoke Only)

• CSS blend modes work visually, but true background removal is best accomplished in video editing before uploading.
• CSS can’t make black pixels transparent unless the blend mode works well for your case.
• Ideal solution:
• Use a pre-rendered transparent WebM or MOV video with an alpha channel (not currently supported in Webflow natively).
• Alternative: Convert smoke to a Lottie animation (using After Effects) and render with transparency.
• Workaround:
• Place your video in a div above the background image and apply mix-blend-mode: screen (via Style panel or custom CSS in Page Settings).
• Make sure there’s no background color on the video container to avoid blend distortion.

3. Why Video Won’t Autoplay on iOS 10.2

• iOS 10.2 restricts autoplay for videos unless the following conditions are met:
• The video must be set to autoplay
• The video must be muted
• The video must be inline (not full screen)
• Webflow’s Background Video element automatically mutes and loops videos, but older iOS (like 10.2) had limited support for autoplay regardless.
• iOS 10.2 may still block autoplay entirely, as full autoplay support on mobile was added in iOS 10.3+ with stricter media policies.

Summary

To blend a video over a background in Webflow, apply a Mix Blend mode like Screen to the video or its container. True black background removal must be handled in video editing or replaced with a Lottie animation. Autoplay issues on iOS 10.2 are due to Apple’s legacy media restrictions, and full support starts from iOS 10.3+ when video is muted and plays inline.