This serves as a versatile template for creating video-based interactive resources. The provided codes ensure the following:

1. Optimized for seamless playback on iOS and iPad devices in desktop view.

2. Restricts playback to a single video at a time, preventing the simultaneous playing of two videos.

3. Ensures perfect alignment of panels and videos across various screen orientations and sizes.

For instance, consider the following code snippets:

```cssPanel = {"position":"absolute","top":"2vh"} // Controls the position of all videos within this panel container.

onEnded to determine the next action, e.g., t = 41.5

topcss =

css = {"top": topcss}

```

Plottingpanel is sync up with the video via these css

cssPanelAndy = { "display": "flex", "justify-content": "center", "align-items": "center"}

cssPanel = {"position":"absolute","top":offSet}

where

offSet = 1vh // to edit to suit needs

How to use this template:

1. Replace the video with 1920 × 1080 dimensions with your desired content, some fine tuning is needed for other dimensions.

2. Modify the interactive parts of the code to suit your specific requirements.

3. use time t to control the frames of video to show, for example, start t=0, then later t =1 etc to move the storyboard of video, use 0.5 to add interactive elements

4. do not change the order of the video panels below, and the interactive panel on top as the interactive panel needs to be above the video layer to be interactable.

Credits:

Video by Kim.