How can we help you today?

How to Create a List of Videos with Thumbnails

If you would like to display a list containing several YouTube videos on your page so that it would show thumbnails and other necessary information, please check this tutorial. 

The corresponding videos will be opened on the page in a lightbox after the user clicks any of the items.


STEP 1: Create a SharePoint List.


For this example, we will be using a SharePoint announcements list, but feel free to use a custom list as well.

Our list includes the following columns: Title, Description, Date and Time, and YouTube Video ID. To see how to fill in the YouTube Video ID column, please check the next step.





STEP 2: Find YouTube Video IDs.

Please open in your browser the YouTube video you would like to display. Look at the top address bar and search for v= followed by a combination of 11 letters and numbers. This combination is the YouTube video ID you need. For example, this is what you need to search for in a video opened separately: This is how the link to the same video will look like when it is a part of a playlist:

As you can see, the 11-symbol combination is the same. Please copy it and assign to every video you would like to display on your page. With this ID, you will be able to easily create thumbnails for the list and link the corresponding video to every item in the list.



STEP 3: Discover the Internal Name of the Column.


In order to connect the element properly, you need to discover the internal name of the YouTube Video ID column. You can do it easily, just switch to the List tab, choose List Settings, scroll down to find the YouTube Video ID column and look at the top address bar in your browser. The name in the end of the URL, after Field=, is what you are searching for. Please copy it.

Refer to the animation below to see this step:



STEP 4: Insert Image List element.



STEP 5: Connect Image List to SharePoint List.



STEP 6: Map the fields.

This is the most important step. Please switch to the Items tab and fill in the following fields:


Title: click the chain icon on the left of the field and choose Title.

Subtitle: click the chain icon on the left of the field and choose Subtitle.

Description: click the chain icon on the left of the field and choose Description.


For the following two fields, please substitute Column_Internal_Name for the name you have discovered in step 3:


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

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


Set the linking option to Lightbox. After everything is ready, press Update and save the changes on the page.


That's it! Here is what the result will look like:




Thank you for your attention! Please do not hesitate to contact ShortPoint Support in case you have any questions or suggestions.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 69 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more