Show Me Around

A platform that allows schools AND others to build an interactive video tour of their building, School, House, or anyplace they want to present to the world! For example, a school will ask a production team to make an interactive tour of their school, the production team will upload their videos to a video host platform like youtube or Vimeo and link it to my website. Adding a couple of mouse clicks and they should have an interactive video for the public to jump between with 0-time delay and with no page reload.

What makes this so unique, yet effective, in what it does is that it renders the next recommended videos for you in advance! After a video finishes or even during it, the viewer can select the next recommended video to watch. All the next recommended videos of the current video are rendered hidden and will switch to visible on request and play instantly since it had time to buffer a bit in the background.

The structure of the site is made as simple and efficient as possible. It is important to make sure the loading time and switching from a video to another can be without any pauses. The following image displays the layout of every page. It is made to be easy and small to render and simple to display on every screen with no issue or fear of losing content off-screen.

Working with CSS variables kept the CSS clean and easy to maintain. And writing general classes that can be reused somewhere else also helped save time wasted on fixing where an element should go.

Another way to jump between videos is the introduction of the map. The creator will upload a map (Blueprint) with colored rooms and link every video with its color when entering the videos. when clicking on the requested room, it will find, Render, and play the selected video and render its recommended videos hidden as well.

The design of the website got shaped up early in the project. Early sketches and illustrations of an index page helped build the CSS of the website easier and faster while coding the core elements of the site. Having a color scheme to follow (CSS variables) and a clean, modern, and flat design already built made adding an element as easy as it can be.