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?
TL;DR
- CSS blend modes in Webflow alter video appearance but can't remove black backgrounds; use Lottie, WebM with alpha, or PNG sequences for transparency.
- For autoplay on iOS 10.2, mute the video and use Webflow’s background video element, but reliable autoplay starts with iOS 11+.
You're trying to use CSS blend modes with a background video in Webflow and remove the black background (e.g., to isolate smoke). You're also experiencing autoplay issues on iOS 10.2.
1. CSS Blend Modes with Background Video
- Webflow supports CSS blend modes via the Style panel under Effects → Blend Mode.
- However, blend modes apply to the entire video element, and you can’t isolate parts (e.g., remove black) with blend modes alone.
- Most videos don’t support alpha transparency (i.e., transparent background) unless exported in special formats—regular MP4 (H.264) has no transparency.
- Blend mode “screen” or “lighten” can sometimes make black areas fade out if the background is lighter, but results depend on video content.
2. Removing Black Background to Show Only Smoke
- Regular MP4 backgrounds can't have transparency.
- Options to achieve a “smoke over image” effect:
- Render your smoke video with an alpha channel and use a WebM with VP9 + alpha (not supported reliably in Safari or iOS).
- Convert the smoke effect to a Lottie animation (if it’s vector-based or can be converted with After Effects).
- Use animated PNG sequence if file size is acceptable.
- Webflow has limited support for true video transparency. Use a Lottie or PNG sequence workaround for best control.
3. Video Autoplay on iOS 10.2
- iOS 10.2 does not support autoplay of videos with audio.
- To autoplay on iOS:
- Ensure the video is muted (
mutedattribute must be set in Webflow). - Use the native Webflow background video element, which sets autoplay and muted attributes automatically.
- Even then, iOS 10.2 is outdated and may still block autoplay due to mobile data restrictions. Reliable autoplay only became mainstream in iOS 11 and up.
Summary
CSS blend modes can affect video appearance in Webflow but won’t remove a black background. To isolate visual elements like smoke, use alpha-enabled formats like Lottie or image sequences. For autoplay on older iOS versions, ensure the video is muted, but full reliability requires iOS 11+.