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?

CSS blend modes can be applied to Webflow elements, including background videos, but with key limitations. Background videos in Webflow are <video> tags, and applying blend modes directly may not produce the desired result due to browser rendering behavior and video transparency constraints.

​

1. Apply Blend Mode in Webflow

​

• Select the background video element on your canvas.
• Under the Style panel, scroll to the Effects section.
• Set the “Blend mode” to your preferred mode (e.g., screen, lighten, or multiply).
• Note: For blend mode effects to be visible, the video must be layered on top of another visible background element, such as an image or gradient.

​

2. Remove Black Background from Video (Transparency is Not Supported)

​

• Standard video formats like MP4 do not support transparency.
• To show only the “smoke” and make the rest transparent, you need to use a video format that supports alpha channels (like WebM with alpha or animated PNG sequences), but:
• Webflow’s native background video element only supports MP4.
• MP4 files cannot have transparent backgrounds, so black areas will always render unless you use visual tricks (like blend modes) to mask them out.

​

Workarounds include:

• Use CSS blend modes creatively if the background is uniform or dark.
• Convert the smoke into a Lottie animation (JSON format) using After Effects + Bodymovin if the smoke is vector or simple.
• Embed a WebM video with transparency manually using a custom code embed (not supported by native background video). Example:
• Upload your WebM to a hosting service.
• Use a custom embed and apply styles including mix-blend-mode and positioning.

​

3. Autoplay Issues on iPhone iOS 10.2

​

• iOS 10.2 does not support autoplay for inline videos with sound.
• To ensure autoplay works on older iOS devices:
• Mute the video (Webflow background video elements are muted by default).
• Set the video to autoplay in Webflow.
• For full custom video embeds, set attributes: muted, autoplay, playsinline, loop.

​

Even so, iOS 10.2 has limited support for autoplay behavior. Apple began allowing muted autoplay in iOS 10+, but support was inconsistent in early versions. You may not get reliable autoplay until iOS 11+.

​

Summary

​

To blend a background video with transparency in Webflow:

• Use blend modes on a background video layered above an image, but remember MP4 doesn’t support alpha transparency.
• Consider converting your smoke into a Lottie animation or WebM with alpha and embed it manually for full control.
• iOS 10.2 has autoplay limitations, even for muted videos—this issue is due to OS restrictions, not Webflow.