I imagine this is easily doable in Sparkle, but when I tried, using a small cellphone-taken mp4 video as a test, I could not get it to work. I loaded the video on a fresh page, but I could not click “Full page width” on the Arrange tab because the option was greyed out.
I am quite the beginner when it comes to Sparkle. Does my problem have something to do with the dimensionality of my test video? Why is the “Full page width” option greyed out and how do I “ungrey” it?
You add the video to the PAGE, not a box or video container. Go to the background section and change Content to video. You can select where the video comes from (vimeo, youtube, disk or network location). The video will display at full screen width and height. This means that at some browser window sizes, the video will crop at the edges in order to maintain its full browser height without distorting the video. If you choose the Fixed position option, your page content will scroll over the video. If you don’t want this to happen, deselect the fixed position option.
When you move to different breakpoints, the video will remain as a full screen video, but it will be narrower - essentially the sides will be cropped to display on the narrower device screen, like this:
thanks @francbrowne - this is probably the best method I have found to achieve what I want.
I do get some issues when the browser windows are stretched or changed on different devices, mainly the text below moving or appearing to have moved further down the page. It also doesn’t look great on the mobile viewpoint. Hopefully, this requirement is added as a feature in the future.
I think it looks great - leave it as its is. One thing I did notice is that normally, when a video is linked as a background, it tends to fill the whole screen. In your website, it stays fairly much a fixed height and maintains the aspect ratio much better. Did you add any code to achieve this, or is it something about the vimeo player that does this?
I do see the issues on mobile, especially in landscape. I’ll offer up two suggestions.
Eliminate the Vimeo player since there’s no user interaction. Export from Vimeo, and import from disk into Sparkle, fill background with the video, and then store the video in the document. Pulling video from across the web increases load time and introduces other internet issues. Sparkle will give your users a much better video experience.
Whatever device (and orientation) you think will be primary for users viewing your website is the device you want to setup first. It it’s mobile portrait, go into device menu and turn off the other devices. Get the desired device orientation perfect and add, one at a time, the other devices. It’s more work but your users deserve no less (and you’ll feel better too).
I have the original video, so I can store this in the sparkle document. I guess I used the vimeo option to reduce strain on the web server and hoped it would be faster hosted via vimeo.
