Step 3: configure the project and call it done.

1. Delete the dummy video "video1.mp4" in the the downloaded folder's "videos" directory;

2. Copy all your renamed video files to the "videos" folder instead;

3. Use any text editor to open "config.js" (default text editors of any OS are fine);

4. Replace the finalVideoIndex value bewteen the colon and the comma with the index number of the last video clip you copied into the folder. Leave everything else unchanged;

/* Video Information */
  finalVideoIndex: 23, // substitute 23 for 16, if video16.mp4 is your last video

1. Save the file;

2. Fire up "index.html" with your web browser. You should have a functional version now.

Customize more.

Whenever necessary, return to edit the "config.js" file and save your changes. Refreshing the project webpage should immediately show your updates.

The Interactive Video Grid allows these customizations:

• Page Title and Page Description (for browser tabs and search results)

• Project Title and Subtitle

• Project Info Text Display (mouse over to view; capable of containing a brief paragraph)

• Full Video Display (press button to start)

• Grid Layout Adjustment (allows changes to the number of grid columns and the size of grid gaps)

• Volume Control

• Color Theme

Click here for detailed instructions.

Congratulations! 🧤

You now own a fully customized, functional build in the form of a folder, which you can carry anywhere and make display (but always carry the folder).

If you'd like to bring your insights online and never have to carry anything anymore, sit through the following extra steps.