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}

```

//to edit

videoWidth = 1024

videoHeight = 768

factor = 0.95 // to edit to suit your video dimensions

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 = 2vh // to edit to suit needs

How to use this template:

1. Replace the video with 1024 × 768 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 Renna.