How to Customize the Vimeo Video Design Element

This article will show you how to customize the Vimeo Video Design Element and expound on its modifiable features. 

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the Vimeo Video Design Element
  • Step 3: Paste the Vimeo URL
  • Step 4: Customize the Vimeo video’s design
  • Step 5: Save
• Vimeo Video Features
  • A. Content tab
  • B. Design tab
  • C. Custom CSS Tab

Prerequisite

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the Vimeo Video Design Element:

NOTECheck out Vimeo Video Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Vimeo Video Design Element:

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:Insert the Vimeo Video Design Element

• Click the plus icon.
• Use the search box to look for Vimeo Video and click it.

Step 3: Paste the Vimeo URL

• Paste the Vimeo URL of the video you want to showcase in the field provided.

Step 4: Customize the Vimeo video’s design

• Navigate to the Design tab.
• Adjust the Width of the Vimeo Video Design Element according to your preference.

NOTECheck out Vimeo Video Features to learn more about the OOTB options you can customize.

Step 5: Save

• Once satisfied, click the green check mark.
• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Vimeo Video Features

Below are the options you can find in the Vimeo Video Settings window:

A. Content tab

The Content tab allows you to add the Vimeo URL of the video you want to feature on your page.

B. Design tab

The Design tab allows you to customize the width of the Vimeo Video Design Element. You have the option to adjust the width in [1] px, [2] %, or [3] em.

---

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Vimeo Video Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial) to know more about Custom CSS.

NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.

That’s it! You can now start showcasing Vimeo videos on your SharePoint pages.

Related articles:

• How to Customize the Animate Design Element
• How to Customize the Before and After Design Element
• How to Customize the Well Design Element
• How to Customize the Textshow Design Element
• How to Customize the Info Design Element
• How to Customize the YouTube Video Design Element