YouTube video feeds

Embed Restrictions

Our YouTube embed system can only accept videos that are uploaded to the CERG YouTube channel. Any videos or playlists from other channels will not work.
The homepage will always show the latest videos uploaded to CERG's YouTube channel. Instructions are for changing the YouTube embeds on other pages.

There are many YouTube feeds on the CERG website that embed our videos onto CERG's website. Some feeds automatically pull in videos from a YouTube playlist, while others are manually curated to show specific videos.

The feed is always inside a green HTML/embedded code component:

Feed properties

Every feed is controlled by a small set of settings. You won't need all of them at once. Which ones you fill in depends on what you want the feed to show:

Setting	What it does	How to use it
`data-videos`	Shows specific videos that you choose.	Paste in one or more YouTube links separated by commas.
`data-playlist`	Automatically shows the newest videos from a YouTube playlist. However the playlist is sorted on YouTube, it shows the videos in that order.	Paste in the playlist link. Only one is supported.
`data-max-videos`	How many videos to show. Only matters when you're using Playlist. With Videos, the feed just shows however many you listed.	Enter in a number; default is 2.
`data-title-style`	Controls how each video's title looks.	Default is `regular` (bold text). Set to `heading` if the feed is more prominent on the page.

Videos > Playlist

If you fill in both data-videos and data-playlist, the feed will show the hand-picked videos you listed in data-videos. data-playlist will be ignored.

Displays nothing if no videos or playlist are set

If data-videos and data-playlist are empty, nothing shows up. This is expected. It ensures the feed can be used safely in templates without configuration when no videos or playlists are needed

How to change an existing feed

Reset the feed before changing it

Before putting in your own content, ensure data-videos="" and data-playlist="" to avoid conflicts.

To show a playlistTo show specific videosTo show latest uploads

Copy the playlist link from YouTube. It should look like this: https://www.youtube.com/playlist?list=PLHSY2zpB60yE
Click the Edit button on the HTML component.
Paste the playlist link into the data-playlist setting.
If you want to show a specific number of videos, change the data-max-videos setting.
Press the save button in the top left and close the coding window.

Find your video links from YouTube. They should look like this: https://www.youtube.com/watch?v=video_id
Click the Edit button on the HTML component.
Paste the video links into the data-videos setting, separated by commas.
If you want to show a specific number of videos, change the data-max-videos setting.
Press the save button in the top left and close the coding window.

Click the Edit button on the HTML component.
Fill in data-playlist="" with the channel's uploads playlist ID:
```
UURAuV8XqQM0MD3VK_Pi32AA
```
Press the save button in the top left and close the coding window.

How to set up a new feed

Add an HTML component into a column control component wherever the feed should sit. Ensure it takes up less than 50% of the page width, otherwise the feed will look big.
Click edit. It will open a coding text box in a new tab.

Paste in the following code:

<script src="https://www.sfu.ca/content/dam/sfu/politics/CERG/code/js/iframe.js"></script>
 <iframe class="sfu-video-embed"
     src="https://cerg-youtube-feed.pages.dev/latest-videos-styled"

     data-videos=""
     data-playlist=""
     data-max-videos="2"
     data-title-style="regular"

     title="CERG Youtube Feed" width="100%" height="800px" frameborder="no"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
     style="border-style: none; overflow: hidden; transition: height 0.2s ease;">
 </iframe>

Fill in one of the settings — either data-videos or data-playlist, following the details for the feed properties for whichever you're using.
Press the save button in the top left and close the coding window.
To see the feed before publishing, switch to preview mode and reload the page. The feed should show up in the column you added it to.
Activate the page.

Preview & Activate

To see the feed before publishing, switch to preview mode in AEM and reload the page.
Activate the page.