I currently (just for testing) have a background image set on the body and a background video component placed on the page with the .screen-blend-mode class set on it but when I export the site there is no difference in the video at all.
Is it not possible to do this as I’m trying to get rid of the black background in the video so that just the smoke shows over the image instead.
Does anyone know why the video won’t autoplay on an iPhone running ios 10.2?
The video loads up but has the play button on it which incidentally doesn’t even work when I press it. I had read that ios now allows background videos to autoplay as long as there is no audio present which in this video there definitely isn’t any audio track in it at all so I’m not too sure what I’m doing wrong as I had thought that it should just go ahead and autoplay itself?
Hi, have you seen it working o another site? i mean any video having transparency generated from anything else than opacity and alpha channel? As far as I know, you can blend something over a video, but can’t blend a video over something else. Only way to see through a video is alpha channel, svg mask or opacity.
The background-blend-mode property defines how an element’s background-image should blend with its background-color: .container { background-image: url('image.jpg'); background-color: red; background-blend-mode: screen; }
The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property. For example: .blend { mix-blend-mode: exclusion; }
So if your video element is above the body, we should probably try mix-blend-mode instead of background-blend-mode.
But it doesn’t work, wherever I put the mixproperty:
That kind of proves my suspicions (unfortunately). I thought it might be so that it would work around the other way and not this which is really quite sad.
I had seen it done on a Webflow site (can’t remember the link now unfortunately) but I’m thinking it was just some opacity change that was applied to the video and not an actual blend mode.
Never mind. I’ll come up with something that will do what I need.
Ah seems we were typing at the same time there. Yep that’s pretty much the same conclusion I’d come to also.
Obviously I could just make the movie with the image behind it but that’s going to make it slightly larger and I was also hoping to use that sort of effect (not necessarily smoke effect though) elsewhere.
No biggie though. I can get the sort of effect I want so not too worry. Was just hoping I was perhaps missing something obvious somewhere.
I believe that video did have an alpha channel in it. I did definitely apply a key to one of the versions I made and I’m pretty sure that I uploaded that one too Webflow.
I might be misunderstanding what you’re saying but should transparency work on the video in that case or is it more difficult than that?
To work on the web alpha channels have to be detached from their channel and printed in the video, which is then double height. You can check many articles about that on Google.
I might be misunderstanding what you’re saying but should transparency work on the video in that case or is it more difficult than that?
Yes The video example I pasted above (i put that again below) is made in webflow only, no custom code. I blurred the video then reduced opacity.
Ah thanks for that. I did come across something the other day about that double height way of doing things but it seemed quite convoluted for something that I thought would just work out of the box as it were.
Very sad although perhaps they’ll update CSS to dip that in the future.
Sorry for the extra bump on this one but was just wondering if you or anyone else perhaps knows about the second question I had in my original post?
I’m viewing it on iOS 10.2 on an iPhone and pretty sure that it should auto play but it doesn’t want to have any of it
Also it comes up with the play icon (which I definitely don’t want to see) but I can’t even click on that even if I wanted to stop at the moment I’m having to hide the video on mobile devices but wondering why it’s not working the way it should?
On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins. <video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.
So you may have to craft your own HTML5 code for the time being, in order for videos to autoplay on iOS 10.x
Ah okay, thanks for that information. I had read that video elements should just autoplay but hadn’t seen that they need that plays inline attribute set.
