If you choose to set up a responsive project with Fluid Boxes workflow, it is compulsory that you leave the layout to be monitored by Fluid Boxes control as primary. Only for specific situations Fluid Boxes should be overridden by using Position properties. It is similar to the use of Static fluid boxes: their use should also be limited as much as possible or you lose most of the fluidity which is typical for Fluid Boxes. Besides object stacking, one of the excluded items in a normal fluid box is Interactive video. This blog tries to explain best practice for such a slide, which will not have any fluid boxes.
Position Properties panel can also be used for objects which are unlocked from any fluid box.
Interactive video slide
Recommendation: use the Blank master slide to insert an interactive video. That is the case for the example screenshots. The video was taken by night, hence very dark. For that reason I changed the background color of the Blank master slide to black instead of the default white. That way it could blend more easily with the video if it is not filling the slide (setup 1). This has consequences for the overlay slides as you'll see later.
In a normal fluid box you cannot have slide video. Similar to bitmap images it is very important that the width/height ratio is maintained whatever the browser resolution on the device. That is where Position Properties are important. Two possible setups, to have the video adapting to any browser resolutions will be described..
The images are for a video in 4:3 format. The desktop resolution is 1024x627 as you can see in this screenshot. The width of the video is 1024, which means that part of the height (765) is outside.
I turned on the feature ‘Preview Height’ under the Style tab, which results in the yellow surrounding box and the indication of the device size. When the resolution changes, there are two ways to keep an acceptable view, while not distorting the video. The setup is realized using the Position Properties panel. If you don't see that panel, turn it on using the Window menu.
Setup 1: Width = 100%, Height = Auto
Setup 2: Width = Auto, Height = 100%
This will result in cropping the video as you can see in the setup and the screenshot of the same iPad situation as in the first setup:
The choice between both setups depends on the video and whether you need to preserve it to be fully visible or not. For the second setup, if you want to keep another part than the central part, you can add specific setting for the X and Y position of the video, instead of using the center horizontally option.
How do you treat the overlay slides? They need to be created individually, should you use a master slide with or without fluid boxes? Read on.
Content overlay slides
After a lot of exploration, I detected that you get the best result when creating Overlay slides without using Fluid Boxes as well. For the layout, use a similar approach as you used for the video with the Position Properties. Using Fluid boxes could mess up the slides when they appear in the interactive video. Here is a screenshot of such an overlay slide, when using Setup 1 (Width set to 100%):
This screenshots shows the same overlay slide for setup 2:
Knowledge Check Overlay slides
Similar use cases
Background images for slides or master slides can be treated the same way.
Position properties panel can also be useful when taking out objects from a fluid box, to attach it to the one of the slide edges, or to another item. A company logo is a typical example.
Those use cases have been treated in many videos, but I never found one about the workflow for an interactive video. since you have to deal with the overlay slides as well, suspected this could be a useful blog.
Using SVGs instead of bitmap images in or out of fluid boxes in a responsive project can lead to weird situations. Stuff for another blog.
The example project is not provided. If you want to play with it, contact me by mail or through my website. It is just a trial and error project, not an example of a nice interactive video.