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

This tutorial demonstrates how to add a Vimeo playlist to a SharePoint page using the Code Design Element.

Quick Walkthrough

1. Go to the Vimeo playlist you want to embed into your SharePoint page, customize it, and copy the embed code.
2. Go to the SharePoint page where you want to add the playlist and edit the ShortPoint Web Part.
3. Click the plus icon and insert the Code Design Element.
4. Paste the code in the HTML field and customize it.
5. Go to the Design tab, enable Sandbox mode and Auto Resize.
6. Click the green check mark to apply your changes.
7. Click Save to keep your changes.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Customize Vimeo Playlist
  • Step 2: Copy the Embed Code
  • Step 3: Edit the ShortPoint Web Part
  • Step 4: Insert the Code Design Element
  • Step 5: Paste Embed Code
  • Step 6: Enable Sandbox Mode and Auto Resize
  • Step 7: Save
• Vimeo Layout Features

Prerequisites

• You must have the latest version of ShortPoint SPFx installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have a Vimeo Playlist / Showcase ready to embed.

Interactive Tutorial

Start the interactive tutorial to learn how to embed a Vimeo playlist into SharePoint:

Step-by-step Tutorial

Follow the detailed guide below to learn how to embed your Vimeo playlist on your SharePoint page using the ShortPoint Code Design Element:

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: Edit the ShortPoint Web Part

• Go to the SharePoint page where you want to add the Vimeo playlist and click Edit:

• Close the Toolbox:

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

Step 4: Insert the 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 5: Paste Embed Code

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

Step 6: Enable Sandbox Mode and Auto Resize

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

Step 7: 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:

Congratulations! You can now add Vimeo video playlists on your SharePoint page using the ShortPoint Code Design Element.

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.

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 YouTube Video Playlist into a Modern SharePoint Page Using the Code Design Element
• How to Embed the Microsoft Stream Video into a SharePoint Page