This tutorial will show you how to embed a video playlist from Vimeo using ShortPoint's free Code Editor Web Part. Check out the quick walkthrough if you're already familiar with the Code Web Part or follow the step-by-step tutorial for detailed instructions.
TABLE OF CONTENTS
Prerequisite
- You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.
- You must already have a Vimeo Playlist / Showcase ready to embed.
Quick Walkthrough
1. Go to the Vimeo playlist you want to use, customize it, and copy the embed code.
2. Go to your SharePoint page and add the ShortPoint Code Web Part.
3. Click the Edit Properties icon of the ShortPoint Code to edit it.
4. Delete all default codes.
5. Paste the copied code in the HTML field, customize it to your needs, and click Save.
6. Enable Sandbox Mode, disable Auto Height, adjust the height of the code container, and close the ShortPoint Code window.
7. Republish the page.
Step-by-step Tutorial
Follow the detailed guide below to learn how to embed your Vimeo playlist to your SharePoint page:
Step 1: Customize Vimeo Playlist
- Go to the Vimeo playlist you want to embed:
NOTEIf you don’t have a Vimeo playlist yet, you can check out Embeddable Playlists to learn how to create one.
- Go to the Layout tab:
- Customize the look of the Vimeo playlist according to your preferences:
NOTECheck out Vimeo Layout Features to learn more about the options you can modify before embedding.
Once you’re satisfied with your customizations, click Save:
Step 2: Copy the Embed Code
- Then, click Share:
- Go to the Embed tab:
- Click Copy embed code:
Step 3: Add the ShortPoint Code Web Part
- Go to the SharePoint page where you want to add the Vimeo playlist and click Edit:
- Click the close icon to leave the Toolbox:
- Select the plus icon to add a web part:
- Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:
Step 4: Edit the ShortPoint Code Web Part
- Click the Edit Properties icon:
Step 5: Delete Default codes
- Select each field, delete the default codes inside, and click Save:
Step 6: Paste the Code
- Click the Edit HTML field:
- Paste the code:
- You can directly edit the code in the ShortPoint Code Editor. Customize the code according to your needs and click Save:
Step 7: Enable Sandbox Mode
- Toggle on Sandbox Mode:
- Disable Auto Height, adjust the blue slider to customize the container’s height, and click Save:
Step 8: Republish Page
- Once satisfied, click the close icon to leave the ShortPoint Code window:
- Click Republish once you’re ready to make your changes live:
Congratulations! You have successfully embedded a Vimeo playlist on your page.
Vimeo Layout Features
Below are the options you can customize for the Vimeo playlist embed:
![]() | Layout | allows you to change the style of the Vimeo playlist. You can choose between default, featured, and video player styles. |
![]() | Dark Mode | when enabled, the playlist will turn black. |
![]() | Hide Vimeo Navigation | when enabled, the navigation menu will disappear. |
![]() | Hide Vimeo Logo | when enabled, the Vimeo logo will be removed. |
![]() | Custom Logo | when enabled, you will have the option to upload a custom logo. It is best to use a PNG image with at least 200x200 pixels. |
![]() | Accent Color | when enabled, you will be able to choose the color that is used for buttons and video controls. |
![]() | Continuous Play | when enabled, the next video will automatically play after a video ends. |
![]() | Loop Playlist | when enabled, the first video in the playlist will play again when the last video finishes. |
![]() | Allow Share Button | when enabled, the share button will be visible. |
![]() | Allow Video Downloads | when enabled, the videos in the playlist will be downloadable. |
NOTEIf you want to know more about Vimeo playlists, check out How to customize my showcase
Ready to see more of the ShortPoint Code web part? Check out the tutorials below to make the most out of its features:
- How to Add a Facebook Post to a SharePoint Page
- How to Add an Instagram Post to a SharePoint Page
- How to Add an X Post to a SharePoint Page
- How to Add a LinkedIn Post to a SharePoint Page
- How to Add a Viva Engage Feed to a SharePoint Page
- How to Add a Stock Widget to a SharePoint Page
- How to Add a Web Page Animation to a SharePoint Page
- How to Embed a Weather Widget into a Modern SharePoint Site