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
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.