States of a Windows 8 application - Build Windows 8 Apps with HTML5 and JavaScript - page 196

Adjusting the video application
In Chapter 7, “Navigating through multimedia content,” you created a video application. A listview
allowed users to select a YouTube video which was then played through an IFRAME element. The
application was written while blissfully ignoring view states; and the behavior of the application with
respect to view states is poor, as Figure 8-13 shows.
FIGURE 8-13 The Video application of Chapter 7 cuts off video when filled or snapped.
When filled, the application cuts off a significant part of its user interface—the video player. You
can easily figure out that in portrait and snapped mode, where the width of the screen is smaller,
things can only go worse. Some changes are in order to make the Video application integrate well
with the surrounding environment.
The user interface is made of two main elements—the listview to pick up a video and the player.
The first thing you might to do is put both in a flexible container. Second, you might want to get rid
of most of the fixed-size values introduced in the last chapter. Basically, you only need to indicate an
explicit width or height in the following cases:
■ Define the height of the listview where the user selects the video to play.
■ Define the width of the listview items so that they show up nicely in snapped mode.
■ Define the expected size of the video player.
So open the default.css file; skip classes defined for body, header, footer, and title; and then wipe
out everything else. Next, add the following:
.flexible-container {
display:-ms-flexbox;
border: solid 1px #fff;
-ms-flex-pack: center;
-ms-flex-wrap: wrap;
}