Further customize your project.

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

You can achieve all above adjustments by editing in the config.js file.

As detailed intructions are hard coded in the config file already, we will only further elaborate Full Video Display and Grid Layout Adjustment here.

Full Video Display

To enable a play button to continuous watch of your scene in full screen, set the fullVideoExists variable to true and include a fullvideo.mp4 in the videos folder.

If you miss either step, the full video play button will not appear or function as expected.

fullVideoExists: false, // enter true if you've included a fullvideo.mp4 in the videos folder

Also, pay attention to the size of your fullvideo.mp4 file.

Larger files execute well locally but may cause issues when using Github conventionally. To avoid most problems, limiting the file size to under 50MB is a good idea.

For workarounds, feel free to contact me at: [e-mail].

Grid Layout Adjustment

Use the two variables: gridColumnCount and gridGapScale to control the behaviour of your grid layout.

gridColumnCount: 5, // number of columns in the video grid
gridGapScale: 1, // size of the gap between videos (1 is default)

The system will automatically adjust if you have fewer videos than the column count, so don't worry about breaking it.

Moreover, the gridGapScale acts as a multiplier for the default gap width, so think about multiplication when making changes instead of addition. The column gap might behave differently from the row gap, so adjust as necessary.

Best of luck with designing!