Swap background video with image on mobile devices (and vice versa)

So @danstanley asked yesterday how to display a video background on desktop and instead on mobile devices, only a background image.

I offered him to quickly setup a demo, in case he needs any help. So here we go.

I only used a section block with a video background and the image which is required on mobile devices is just the video placeholder image. So everything is already in place out of the box.

With relative styling it is easy to target the video container, as well as the image container.
So we just need to hide/show our elements on the desired breakpoints.
[In addition, I had to reset a preset animation which would hide the image after a short time.]

Screenshot 2022-05-12 111303

Preview:

Download

Just drag and drop the file inside your canvas or the Gutenberg list view panel.
Cheers!

3 Likes

How to drop the file ? If I create a blank Gutenberg page and drop this file onto the canvas, it opens a new browser window with all the code ?

Could you try to drop it inside the Gutenberg list view panel (not the Cwicly Navigator)?
Just handle the file like a block.
This should work.

If you’re on a blank editor page, make sure to drag it to the Paragraph placeholder (you should see a blue line appear).

Wonderful @Marius! Love it :+1:

1 Like

Sadly the import function doesnt seem to work for me.
Tried on live server and local.
Dragged onto list and onto canvas.

What is the file extension for this to work.

The one I downloaded was txt. Tried to rename to json, still the same.

The capital C might in Cwicly in the filename might be the problem here!

Sorry for the trouble, I renamed it after testing and didn’t know about that.
Filename is fixed and file is working as intended now.

1 Like

Yeahhhh, learnt something new today. Great.

Haha I had chosen the visible/hidden icon, instead of display none.
Damn.

Me too :innocent:
Maybe there will be some “Micro Lessons” in the future on the Cwicly YT channel.
How to properly import/export a page or specific blocks would help a lot and in addition, we could reference to this video everytime as a “how-to” with just a link when we share files for others @Louis.

Awsome! @Marius Cwicly has lot of advanced features beginners like me have no idea how to properly use them, you can create video tutorials for beginers.

2 Likes

Thanks a lot @kane, I perceive the need of it in some posts also over there in the Facebook group.
I know the Cwicly team is aware of it and I’m confident they are already working on that kind of lack. The recent videos on their Youtube channel are a step into the right direction in my opinion.

But you are right, Cwicly is that versatile, no chance they are able to cover everything.
Cases like this one in the thread are a good example for it, I guess.

Indeed, I am planning to do something serious with Cwicly, might start with a side project just to test the waters.
Not quite sure what exactly, there are various possibilities. To be honest, I am clueless what Cwicly users would appreciate in general.
The community is growing but still not to the point where it would make sense to invest serious time in it.

I’m going to build a huge UI Kit with Cwicly for my own projects. It’s something which will take a massive amount of time, but will pay off in the long-run for me. Maybe this is something people are looking for here, who knows. Since I think my UI/UX skills are pretty decent, I might share here and there some components.

Maybe there is a possibility to get more info what the community really wants, so 3rd parties -like contributors- can get some insights as well as the Cwicly team already has :wink:

1 Like

I don’t think Cwicly has that much time to cover all options with weekly videos, for example, the interaction block is mind-blowing am Just started learning design and have no idea what it is capable of.

1 Like