How to Embed a YouTube Video Playlist into a Modern SharePoint Page using the Code Design Element

This tutorial will demonstrate how to add a YouTube video playlist to your SharePoint page using the ShortPoint Code Design Element.

Quick Walkthrough

1. Go to the YouTube playlist you want to embed into your SharePoint page, and in its URL, copy everything after &list=.

2. Copy the embed code below and replace PlaylistID with the Playlist ID you just copied in Step 1:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PlaylistID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

3. Go to the SharePoint page where you want to add the playlist and edit the ShortPoint Web Part.

4. Click the plus icon and insert the Code Design Element.

5. Paste the code in the HTML field and customize it.

6. Go to the Design tab, enable Sandbox mode and Auto Resize.

7. Click the green checkmark to apply your changes.

8. Click Save to keep your changes.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Copy the Embed Code
  • Step 2: Edit the ShortPoint Web Part
  • Step 3: Insert the ShortPoint Code Design Element
  • Step 4: Paste Embed Code
  • Step 5: Enable Sandbox Mode and Auto Resize
  • Step 6: 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.

Interactive Tutorial

Before starting the interactive tutorial, go to the YouTube playlist you want to embed into your SharePoint page and copy everything after &list=. This random series of letters and numbers is your Playlist ID:

Then, copy the embed code below and replace PlaylistID with the Playlist ID you just copied:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PlaylistID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Step-by-step Tutorial

Follow the detailed guide to learn how to embed a YouTube video:

Step 1: Copy the Embed Code

• Go to the YouTube playlist you want to embed into your SharePoint page and copy everything after &list=. This random series of letters and numbers is your Playlist ID:

Then, copy the embed code below and replace PlaylistID with the Playlist ID you just copied:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PlaylistID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

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

• Click the close icon to leave the Toolbox:

• Select the ShortPoint tag.
• Click the Edit Properties icon:

Step 3: Insert the ShortPoint Code Design Element

• Choose where you want to add the Code Design Element and click the plus icon to see the library of Design Elements:

• Look for Code using the search bar and select it.

Step 4: Paste Embed Code

• Paste the code in the HTML field and customize it according to your needs:

Step 5: Enable Sandbox Mode and Auto Resize

• Enable Sandbox mode and Auto Resize to fit the video inside the container.

Step 6: Save

• Click the green check mark to apply your changes.
• Click the eye icon to see your page in real-time:

• Click Save to keep your changes:

Well done! You can now add YouTube video playlists to your SharePoint page.

Related articles:

• How to use jQuery with the ShortPoint Code Design Element
• How to Add a Background Image to the Page Header Using the ShortPoint Code Design Element
• How to Embed a Chat Widget Using the ShortPoint Code Design Element
• How to Insert a Weather Widget Using the ShortPoint Code Design Element
• How to Embed a Vimeo Video Playlist into a Modern SharePoint Page Using the Code Design Element
• How to Embed the Microsoft Stream Video into a SharePoint Page