# Video List Page

## Overview

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/BF38V9eGWx7cZhH4AGLK/12.png)

Responsive layout for a generic video page. Includes a main video group, a repeating group for displaying a video playlist, and a content group at the bottom for description and notes. Ideal for online courses or music platform apps. 

## Structure

* When this page is added to your app, it will come with five main groups:
  * **Group Inner video dark background**\
    This group contains a **Video Input** element.
  * **Group Main video list**\
    This group contains the UI for selecting a new video and a Repeating Group called **RepeatingGroup Dummy**.
  * **Group Main video details**\
    This group contains a group for displaying details about the video.
  * **Group PLACEHOLDER video**\
    This group has a hiding rule set by default (when parent width is >1). It collapses the extra horizontal space below the main video group.
  * **Blocks container 860 (do not rename)**

    This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.
* This page comes with one popup:
  * **Popup Hidden Variables** contains two groups:
    * **var - Website object**\
      This group stores the website object (e.g., app name, primary color, and etc.)
    * **var - dummy data**\
      A placeholder group in case you want to use any hidden variable groups later.
    * **var - watched list (dummy)**\
      This stores the list of videos that the user has watched and completed. This is currently using the Dummy data object and should be updated.
* This page will come with one reusable element:
  * [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)

## How to set up

* Modify **Video Inputs's** video source (YouTube or Vimeo) and update the video ID field (t's usually the ID shown in the URL when watching this video on YouTube or Vimeo. It can be a dynamic ID:
  * YouTube video ID is usually 12 characters long
  * Vimeo video ID is usually 10 characters long

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/cr8BFnRqYbc4TnSkhASn/13.png)

* Update **RepeatingGroup Dummy's** data source to display a list of videos (you need to create a data object for this). Update **var - watched list (dummy)'s** data source as well.

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/U7lavWGgmy0xXi6Tp3IQ/14.png)

* Update the text in **Group Inner video details** or hide **Group Main video details** if not needed.
  * To hide the group, uncheck the box for *This page is visible on page load*
* Resize **Blocks container 860 (do not rename)** and add other blocks inside of it

{% hint style="info" %}
If you add more blocks, please resize **Group PLACEHOLDER** so that it is not overlapping with any other elements (for responsiveness). 
{% endhint %}