Hi All
what’s the best way to create a responsive video background in blocs. I’ve created a video in iMovie with ken burns effect etc but it is not responsive over different screen sizes. Any solutions would be much appreciated cheers:grinning:
Follow this…
Follow what ???
this topic. As it might be interesting
what topic?
I try not to use video on breakpoints less than 768 …
Here’s an example:
This example is responsive down to 768. After that, a simple jpg alternative is shown. This was done using the video bric. I don’t like using the video background feature because I don’t want my video to be full screen, and the video background feature does not scale the video down
Nice site. On the Blocsapp website the video is scalable down to mobile just curious how @Norm achieved it and if its full page width
The standard video bric is responsive by default. Make the bloc full width with no padding and then add a video bric. Hide the controls and check the autoplay option. This should fill the bloc with video. If you want to add text over the top of the video, add a text bric below the video and then make a custom class to position the text box where you want it to appear (use negative margins to move the text up over the video). The only issue I have found with this method is there is a small white margin to the right and left of the video bric in Blocs 3. In Blocs 2, the issue doesn’t appear at all.
EDIT: The left and right white margins can be removed by not including gutters. Just select the row containing the video and uncheck the “include gutters” checkbox in the appearance settings.
2 Likes
good description, that’s exactly what I did in my example above.
best practice is to not have a video background on mobile friendly breakpoints, even if it hurts the designer in me 
thank you!