Making an expandable HTML5 video player

in Service Design   —  

Why expand within the page?

For the CraneTV website, each page often contained a number of video tiles, so it made sense to allowing the the user to play each video instantly without needing to leave the page

As a result each tile links to the actual content page, but can also expand into the inline player. This meant developing custom page to player interaction, to seamlessly initialise and play any video media that is present on the page.


In order to ensure smooth animation, we used timed animations for an individual tile to expand and play the video

When one of the small portrait tiles expand, a black overlay fades in over the individual tile before expanding into the video player taking up the full row

Overlays within the player

The Crane video player was built on top on the open-source VideoJS player which was extended

To interact with key video events, including start, stop and pause, we used the VideoJS API. We then extended the JavaScript core to add new controls and overlays within the payer – including sharing, more videos and sub titles.

Rotating an iPad

Based on the design of the page, rotating a tablet causes the layout to reflow. While much of this is done using CSS we also needed precise control over this.

With many pages having a curated layout, where content is arranged three tiles to each row followed by larger tiles on the next row, we needed to detect where there would be gaps in the layout when rotating the iPad to a 2 column layout, and then expand the affected tiles accordingly - such that the curated layout would be maintained.

As rotating a tablet caused the layout to reflow, we also wanted to ensure that it did not interfere with the video that was being watched. With the video player expanded, we decided that we could change the tiles appearance and layout in the background, using JavaScript to reposition the playing video in respect to the new layout.

Read next