Marketplace Apps
The Vimeo App for Agility enables users to seamlessly search, select, and embed Vimeo videos directly into their content with automatic metadata fetching and live previews.
The Vimeo App for Agility enables users to seamlessly search, select, and embed Vimeo videos directly into their content with automatic metadata fetching and live previews.
Vimeo is a powerful video hosting platform that enables you to deliver high-quality video experiences to your audience. With advanced privacy controls, customizable players, and reliable streaming, Vimeo is trusted by creators and businesses worldwide.
This integration makes publishing Agility content with Vimeo videos quick and easy.
Renders a Video field that allows you to embed Vimeo videos in your content.
When you click the field, you can paste any Vimeo video URL, and the app will automatically fetch the video details and display a live preview.
The field supports various Vimeo URL formats:
In order to use this integration, some set up is required.
You can install the app from the Settings / Apps section of Agility.
In order to use Vimeo fields, you need to have Content Models or Page Modules in Agility CMS that utilize this new field type.
Add a Vimeo field to any Content Model in Agility CMS:
Next, create some content using your Content Model:
Now that you've set up the field and allow editors to embed Vimeo videos, the next thing you'll need to do is actually output these fields in your digital solution (i.e. website or app).
The value for a Vimeo Video field will be a JSON string returned from the Content Fetch or GraphQL API.
In order to properly read your Vimeo video data, you'll need to parse the string to an object.
In JavaScript, this can be accomplished using JSON.parse(vimeoVideoFieldValue).
{
// The original Vimeo URL
"url": "https://vimeo.com/123456789",
// Video title
"title": "Example Video Title",
// Video description
"description": "This is an example video description",
// Thumbnail image URL
"thumbnail_url": "https://i.vimeocdn.com/video/123456789_640.jpg",
// Thumbnail dimensions
"thumbnail_width": 1280,
"thumbnail_height": 720,
// Video dimensions
"width": 1920,
"height": 1080,
// Video duration in seconds
"duration": 120,
// Embed HTML code
"html": "<iframe src=\"https://player.vimeo.com/video/123456789\" width=\"640\" height=\"360\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen></iframe>",
// Author information
"author_name": "Video Creator Name",
"author_url": "https://vimeo.com/videocreator",
// Upload date
"upload_date": "2023-01-15T10:30:00+00:00",
// Vimeo video ID
"video_id": 123456789
}
Here's an example of how to render a Vimeo video field in a Next.js application:
import React from "react"
const VimeoVideo = ({ fieldValue }) => {
// Parse the JSON string
const videoData = JSON.parse(fieldValue)
if (!videoData || !videoData.video_id) {
return null
}
return (
<div className="vimeo-video">
<h2>{videoData.title}</h2>
{/* Responsive video container */}
<div
className="video-container"
style={{
position: "relative",
paddingBottom: "56.25%", // 16:9 aspect ratio
height: 0,
overflow: "hidden"
}}
>
<iframe
src={`https://player.vimeo.com/video/${videoData.video_id}`}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%"
}}
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowFullScreen
/>
</div>
{/* Video metadata */}
{videoData.description && <p>{videoData.description}</p>}
{videoData.author_name && (
<p className="author">
By{" "}
<a href={videoData.author_url} target="_blank" rel="noopener noreferrer">
{videoData.author_name}
</a>
</p>
)}
</div>
)
}
export default VimeoVideo
For more advanced use cases, you can use the official Vimeo Player SDK to have programmatic control over the video player:
import React, { useEffect, useRef } from "react"
import Player from "@vimeo/player"
const VimeoPlayerAdvanced = ({ fieldValue }) => {
const videoData = JSON.parse(fieldValue)
const playerRef = useRef(null)
const vimeoPlayerRef = useRef(null)
useEffect(() => {
if (playerRef.current && videoData.video_id) {
// Initialize the Vimeo player
vimeoPlayerRef.current = new Player(playerRef.current, {
id: videoData.video_id,
width: 640,
responsive: true
})
// Add event listeners
vimeoPlayerRef.current.on("play", () => {
console.log("Video started playing")
})
vimeoPlayerRef.current.on("ended", () => {
console.log("Video ended")
})
}
// Cleanup
return () => {
if (vimeoPlayerRef.current) {
vimeoPlayerRef.current.destroy()
}
}
}, [videoData.video_id])
return (
<div>
<h2>{videoData.title}</h2>
<div ref={playerRef}></div>
</div>
)
}
export default VimeoPlayerAdvanced
To use the Vimeo Player SDK, install it first:
npm install @vimeo/player
# or
yarn add @vimeo/player
You can also use the thumbnail URL to display video previews in listings or grids:
const VideoThumbnail = ({ fieldValue }) => {
const videoData = JSON.parse(fieldValue)
return (
<div className="video-thumbnail">
<img
src={videoData.thumbnail_url}
alt={videoData.title}
width={videoData.thumbnail_width}
height={videoData.thumbnail_height}
/>
<h3>{videoData.title}</h3>
<p>
Duration: {Math.floor(videoData.duration / 60)}:{videoData.duration % 60}
</p>
</div>
)
}
Vimeo provides official SDKs and libraries to help you work with their platform:
For comprehensive documentation and advanced features, visit the Vimeo Developer Portal.