Fluid Boxes and Interactive Video? (Position Properties panel)

Intro

With CP2019 the Position Properties panel, originally used only in Breakpoint Views workflow, can also be used for a Fluid Boxes project. From recent questions on the forum I detected that this can lead to confusion, especially for starting users. Some use only the Position Properties panel to create slides and ignore the Fluid Boxes setup.  That was not the goal of adding access to this panel. 

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

It is not compulsory to have fluid boxes on each slide. Be careful: if you use a packaged responsive theme, it is possible that the theme provides fluid boxes on the master slide(s). Same is valid when you use slides and theme from one of the Quick Start Projects.  The savior in this case in any correct Captivate theme is the Blank master slide. It shouldn never have fluid boxes. 

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

This will result in having the video  always completely visible. The following screenshot shows the iPad situation. Due to the black background the empty slide pixels blend in well with the video. Next to the result you’ll see the Position Panel setup, with Advanced part expanded. Vertical and horizontal alignment are turned on, reason why the % for Left, Right, Top and Bottom are greyed out

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%):

It has been set up without vertical alignment in this case. As you may know, the black background (because the video is on a black background) will become transparent when the overlay slide appears to allow the dimmed video to be visible (more about this in an older post).

This screenshots shows the same overlay slide for setup 2:

Knowledge Check  Overlay slides

The situation is different now. This is a Fluid boxes project, so it is impossible to create those KC slides without using the responsive masters for quiz slides.  I tested this out in the same short (dirty) example project and everything works as expected. Just a warning: do NOT use a playbar, because it causes a lot of flickering when a Knowledge Check slide appears.  If you want navigation possibilities for the overlay slides (when you want a sequence of slides) create custom navigation. 

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.