Customizing Interactive Video Viewer customizing-interactive-video-viewer

All visual customization and most behavior customization for the Interactive Video Viewer is done by creating a custom CSS.

The suggested workflow is to take the default CSS file for the appropriate viewer, copy it to a different location, customize it, and specify the location of the customized file in the style= command.

Default CSS files can be found at the following location:

<s7_viewers_root>/html5/InteractiveVideoViewer_dark.css

The viewer is supplied with two out-of-the-box CSS files, for “light” and “dark” color schemes. The “dark” version is used by default, but it is easy to switch to the “light” version by using the following standard CSS:

<s7_viewers_root>/html5/InteractiveVideoViewer_light.css

Custom CSS file must contain the same class declarations as the default one. If a class declaration is omitted, the viewer does not function properly because it does not provide built-in default styles for user interface elements.

An alternative way to provide custom CSS rules is to use embedded styles directly on the web page or in one of linked external CSS rules.

When creating custom CSS, keep in mind that the viewer assigns .s7interactivevideoviewer class to its container DOM element. If you are using external CSS file passed with style= command, use .s7interactivevideoviewer class as parent class in descendant selector for your CSS rules. If you are doing embedded styles on the web page, qualify this selector with an ID of the container DOM element as follows:

#<containerId>.s7interactivevideoviewer

Building responsive designed CSS section-0bb49aca42d242d9b01879d5ba59d33b

It is possible to target different devices and embedding sizes in CSS to make your content display differently depending on a user’s device or a particular web page layout. This method includes, but is not limited to, different layouts, user interface element sizes, and artwork resolution.

The viewer supports two mechanisms of creating responsive designed CSS: CSS markers and standard CSS media queries. You can use these mechanisms independently or together.

CSS markers

To help with creating responsive designed CSS, the viewer supports CSS markers. These markers are special CSS classes. They are dynamically assigned to the top-level viewer container element based on the run-time viewer size and the input type used on the current device.

The first group of CSS markers includes .s7size_large, .s7size_medium, and .s7size_small classes. They are applied based on the run-time area of the viewer container. If the viewer area is equal to or bigger than the size of a common desktop monitor, then .s7size_large is used; if the area is close to a common tablet device then .s7size_medium is assigned. For areas similar to mobile phone screens, .s7size_small is set. The primary purpose of these CSS markers is to create different user interface layouts for different screens and viewer sizes.

The second group of CSS Markers contains .s7mouseinput and .s7touchinput. The marker .s7touchinput is set if the current device has touch input capabilities; otherwise, .s7mouseinput is used. These markers are mostly intended to create user interface input elements with different screen sizes for different input types, because normally touch input requires larger elements.

The third group of CSS Markers contains .s7device_landscape and .s7device_portrait. The marker .s7device_landscape is set if the touch device is in landscape orientation; .s7device_portrait is used when the touch device is rotated to portrait orientation. These CSS markers are intended for use on desktop systems only.

The following sample CSS sets the play/pause button size to 28x28 pixels on systems with mouse input and 56x56 pixels on touch devices. In addition, it hides the button completely if the viewer size is reduced significantly:

.s7interactivevideoviewer.s7mouseinput .s7playpausebutton {
    width:28px;
    height:28px;
}
.s7interactivevideoviewer.s7touchinput .s7playpausebutton {
    width:56px;
    height:56px;
}
.s7interactivevideoviewer.s7size_small .s7playpausebutton {
    visibility:hidden;
}

In this next example, the video control bar is position 138 pixels above the bottom of the viewer if the touch device is in portrait orientation. It is moved to the bottom of the viewer in all other cases:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7controlbar,
.s7interactivevideoviewer.s7mouseinput .s7controlbar {
 bottom:0px;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7controlbar {
 bottom:136px;
}

To target devices with different pixel density, you must use CSS media queries. The following media query block would contain CSS specific to high-density screens:

@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}

Using CSS markers is the most flexible way of building responsive designed CSS because it lets you target not only the device screen size but the actual viewer size, which is useful for responsive design layouts.

You can use the default viewer CSS file as an example of a CSS Markers approach.

CSS media queries

You can also accomplish device sensing by using pure CSS media queries. Everything enclosed within a given media query block is applied only when it is run on a corresponding device.

When applied to Mobile Viewers use four CSS media queries, defined in your CSS, in the order listed below:

Using a media queries approach, you should organize CSS with device sensing as follows:

There is no need to duplicate the entire viewer CSS in each media query. Only properties that are specific to given devices are redefined inside a media query.

CSS Sprites section-9b6d8d601cb441d08214dada7bb4eddc

Many viewer user interface elements are styled using bitmap artwork and have more than one distinct visual state. A good example is a button that normally has at least three different states: “up”, “over”, and “down”. Each state requires its own bitmap artwork assigned.

With a classic approach to styling, the CSS would have a separate reference to individual image file on the server for each state of the user interface element. The following is a sample CSS for styling a full-screen button:

.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/v2/PlayButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/v2/PlayButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/v2/PlayButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/v2/PlayButton_disabled.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/v2/PauseButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/v2/PauseButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/v2/PauseButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/v2/PauseButton_disabled.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/v2/ReplayButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/v2/ReplayButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/v2/ReplayButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/v2/ReplayButton_disabled.png);
}

The drawback to this approach is that the end user experiences flickering or delayed user interface response when the element is interacted with for the first time. This action occurs because the image artwork for the new element state is not yet downloaded. Also, this approach may have a slight negative impact on performance because of an increase in the number of HTTP calls to the server.

CSS sprites is a different approach where image artwork for all element states is combined into a single PNG file called a “sprite”. Such “sprite” has all visual states for the given element positioned one after another. When styling a user interface element with sprites, the same sprite image is referenced for all different states in the CSS. Also, the background-position property is used for each state to specify which part of the “sprite” image is used. You can structure a “sprite” image in any suitable way. Viewers normally have it vertically stacked. Below is a “sprite”-based example of styling the same full-screen button earlier:

.s7interactivevideoviewer .s7fullscreenbutton[state][selected]{
 background-image: url(images/v2/FullScreenButton_dark_sprite.png);
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='up'] {
background-position: -84px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='over'] {
background-position: -56px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='down'] {
background-position: -28px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='disabled'] {
background-position: -0px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='up'] {
background-position: -84px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='over'] {
background-position: -56px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='down'] {
background-position: -28px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='disabled'] {
background-position: -0px -1120px;
}

General styling notes and advice section-95855dccbbc444e79970f1aaa3260b7b

Common User Interface Elements section-d6330c9be8c444aa9b2a07886e3dbc2a

The following is user interface elements reference documentation that applies to Interactive Video Viewer: