How to Create a List of YouTube Videos with Thumbnails using ShortPoint Connect

This article will demonstrate how you can display a list of YouTube videos with thumbnails using ShortPoint Connect.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Set up SharePoint List
    • Step 1: Add YouTube Video ID column to your SharePoint List
    • Step 2: Find YouTube Video IDs
    • Step 3: Copy the Internal Name of the YouTube Video ID Column
  • Part 2: Display the YouTube videos on your SharePoint page
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Switch to Grid Mode
    • Step 3: Add the Image List Design Element
    • Step 4: Connect Image List to SharePoint List
    • Step 5: Map the fields
    • Step 6: Insert and Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have a SharePoint list with all the videos you want to display.

Step-by-step Tutorial

There are two parts to this tutorial. Follow the instructions carefully to get started:

Part 1: Set up SharePoint List

Part 1 involves your SharePoint list. Before proceeding, make sure you already have an existing SharePoint List with all your YouTube videos. 

Step 1: Add YouTube Video ID column to your SharePoint List

Go to the SharePoint list with all your YouTube videos and click +Add Column:

Select [1] Text and click [2] Next:

Add [1] YouTube Video ID as Title and click [2] Save:

Step 2: Find YouTube Video IDs

Open the YouTube video you want to display and copy the line after v= in the address bar:

Then, click Edit in grid view:

Paste the copied line in the YouTube Video ID column:

Repeat the same steps for the other YouTube videos on your SharePoint List:

Once done, click Exit Grid View:

Step 3: Copy the Internal Name of the YouTube Video ID Column

Click the cogwheel icon:

Select List Settings:

Scroll down and click YouTube Video ID:

In the address bar, copy the line after Field=. Make sure to take note of this as you will need it in Part 2 of this tutorial.

Part 2: Display the YouTube videos on your SharePoint page

Part 2 will demonstrate how you can display the YouTube videos from your SharePoint List on your SharePoint page.

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Click the ShortPoint tag:

Select the pencil icon:

Step 2: Switch to Grid Mode

NOTEShortPoint Connect is currently only available in Grid Mode.

Click the Switch to Grid Mode icon:

Step 3: Add the Image List Design Element

Click the gray plus icon:

Use the search bar to look for Image List and click it:

Step 4: Connect Image List to SharePoint List

Navigate to the Connect tab:

There are three connection types you can use (Current Site, Other Sites, or SharePoint Site URL) Select the connection type that best suits your needs. For this guide, we will use Current Site:

Find the name of your List/Library and select it:

Choose the View you want to use. For this guide, we will stick with the default All Items view:

Then, click Connect:

Step 5: Map the fields

Navigate to the Items tab:

Delete any default content:

Click the link icon under Title and select Title:

Click the link icon under Description and select Description:

Copy the link below and paste it into the Image field:

https://img.youtube.com/vi/#Column_Internal_Name/default.jpg

Replace Column_Internal_Name with the Internal Name you copied from Part 1:

Copy the link below and paste it into the Link field:

 https://youtube.com/watch?v=#Column_Internal_Name

Replace Column_Internal_Name with the Internal Name you copied from Part 1:

Select the Linking Option you want to use. For this guide, we will use New Window:

NOTECheck out Types of Linking Options to learn more about this feature.

Step 6: Insert and Save

Click Preview to see how the Image List will look on your page:

Once satisfied, click Insert:

Then, click the eye icon to see your page in real-time:

Click Save to apply all your changes:

That's it! You have successfully displayed multiple YouTube videos on your SharePoint page with thumbnails.

Related articles:

• How to Automatically Open a Lightbox/Popup When the Page Loads (Modern Experience)
• How to Create an Anchor Link That Opens Specific Content on a SharePoint Page
• How to Automatically Rotate ShortPoint Tabs Every Few Seconds Using Code Design Element (Modern Experience)