Skip to content

Add support for Vimeo videos #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adgad wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add support for Vimeo videos #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1df9abe
feat: add Vimeo video block to spec
adgad Feb 20, 2026
1540ac5
feat: add go struct for vimeo-video
adgad Feb 20, 2026
5de8e0c
feat: add bodyxml -> content-tree transformer for vimeo-video
adgad Feb 20, 2026
c62ef8d
feat: add tree -> external bodyXML transformer for vimeo-video
adgad Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions SPEC.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,7 @@ type StoryBlock =
| Tweet
| Video
| YoutubeVideo
| VimeoVideo
| Timeline
| ImagePair
| InNumbers
Expand Down Expand Up @@ -585,6 +586,20 @@ interface YoutubeVideo extends Node {

**YoutubeVideo** represents a video referenced by a Youtube URL.

### `VimeoVideo`

```ts
interface VimeoVideo extends Node {
type: "vimeo-video"
/** Vimeo embed URL e.g. https://player.vimeo.com/player/<id> or https://vimeo.com/<id>*/
url: string
}
```

**VimeoVideo** represents a video referenced by a Vimeo URL.

_Note: this is currently only used by Specialist Titles_

### `ClipSet`
```ts
interface ClipSet extends Node {
Expand Down
28 changes: 24 additions & 4 deletions content-tree.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export declare namespace ContentTree {
type: "blockquote";
children: (Paragraph | Phrasing)[];
}
type StoryBlock = ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | Pullquote | ScrollyBlock | ClipSet | Table | Recommended | RecommendedList | Tweet | Video | YoutubeVideo | Timeline | ImagePair | InNumbers | Definition | InfoBox | InfoPair;
type StoryBlock = ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | Pullquote | ScrollyBlock | ClipSet | Table | Recommended | RecommendedList | Tweet | Video | YoutubeVideo | VimeoVideo | Timeline | ImagePair | InNumbers | Definition | InfoBox | InfoPair;
interface Pullquote extends Node {
type: "pullquote";
text: string;
Expand Down Expand Up @@ -201,6 +201,11 @@ export declare namespace ContentTree {
type: "youtube-video";
url: string;
}
interface VimeoVideo extends Node {
type: "vimeo-video";
/** Vimeo embed URL e.g. https://player.vimeo.com/player/<id> or https://vimeo.com/<id>*/
url: string;
}
interface ClipSet extends Node {
type: "clip-set";
id: string;
Expand Down Expand Up @@ -507,7 +512,7 @@ export declare namespace ContentTree {
type: "blockquote";
children: (Paragraph | Phrasing)[];
}
type StoryBlock = ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | Pullquote | ScrollyBlock | ClipSet | Table | Recommended | RecommendedList | Tweet | Video | YoutubeVideo | Timeline | ImagePair | InNumbers | Definition | InfoBox | InfoPair;
type StoryBlock = ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | Pullquote | ScrollyBlock | ClipSet | Table | Recommended | RecommendedList | Tweet | Video | YoutubeVideo | VimeoVideo | Timeline | ImagePair | InNumbers | Definition | InfoBox | InfoPair;
interface Pullquote extends Node {
type: "pullquote";
text: string;
Expand Down Expand Up @@ -620,6 +625,11 @@ export declare namespace ContentTree {
type: "youtube-video";
url: string;
}
interface VimeoVideo extends Node {
type: "vimeo-video";
/** Vimeo embed URL e.g. https://player.vimeo.com/player/<id> or https://vimeo.com/<id>*/
url: string;
}
interface ClipSet extends Node {
type: "clip-set";
id: string;
Expand Down Expand Up @@ -927,7 +937,7 @@ export declare namespace ContentTree {
type: "blockquote";
children: (Paragraph | Phrasing)[];
}
type StoryBlock = ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | Pullquote | ScrollyBlock | ClipSet | Table | Recommended | RecommendedList | Tweet | Video | YoutubeVideo | Timeline | ImagePair | InNumbers | Definition | InfoBox | InfoPair;
type StoryBlock = ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | Pullquote | ScrollyBlock | ClipSet | Table | Recommended | RecommendedList | Tweet | Video | YoutubeVideo | VimeoVideo | Timeline | ImagePair | InNumbers | Definition | InfoBox | InfoPair;
interface Pullquote extends Node {
type: "pullquote";
text: string;
Expand Down Expand Up @@ -1035,6 +1045,11 @@ export declare namespace ContentTree {
type: "youtube-video";
url: string;
}
interface VimeoVideo extends Node {
type: "vimeo-video";
/** Vimeo embed URL e.g. https://player.vimeo.com/player/<id> or https://vimeo.com/<id>*/
url: string;
}
interface ClipSet extends Node {
type: "clip-set";
id: string;
Expand Down Expand Up @@ -1320,7 +1335,7 @@ export declare namespace ContentTree {
type: "blockquote";
children: (Paragraph | Phrasing)[];
}
type StoryBlock = ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | Pullquote | ScrollyBlock | ClipSet | Table | Recommended | RecommendedList | Tweet | Video | YoutubeVideo | Timeline | ImagePair | InNumbers | Definition | InfoBox | InfoPair;
type StoryBlock = ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | Pullquote | ScrollyBlock | ClipSet | Table | Recommended | RecommendedList | Tweet | Video | YoutubeVideo | VimeoVideo | Timeline | ImagePair | InNumbers | Definition | InfoBox | InfoPair;
interface Pullquote extends Node {
type: "pullquote";
text: string;
Expand Down Expand Up @@ -1433,6 +1448,11 @@ export declare namespace ContentTree {
type: "youtube-video";
url: string;
}
interface VimeoVideo extends Node {
type: "vimeo-video";
/** Vimeo embed URL e.g. https://player.vimeo.com/player/<id> or https://vimeo.com/<id>*/
url: string;
}
interface ClipSet extends Node {
type: "clip-set";
id: string;
Expand Down
37 changes: 37 additions & 0 deletions content_tree.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const (
BigNumberType = "big-number"
VideoType = "video"
YoutubeVideoType = "youtube-video"
VimeoVideoType = "vimeo-video"
ScrollyBlockType = "scrolly-block"
ScrollySectionType = "scrolly-section"
ScrollyImageType = "scrolly-image"
Expand Down Expand Up @@ -426,6 +427,7 @@ type BodyBlock struct {
*Tweet
*Video
*YoutubeVideo
*VimeoVideo
*CustomCodeComponent
*ClipSet
*Timeline
Expand Down Expand Up @@ -494,6 +496,9 @@ func (n *BodyBlock) GetEmbedded() Node {
if n.YoutubeVideo != nil {
return n.YoutubeVideo
}
if n.VimeoVideo != nil {
return n.VimeoVideo
}
if n.CustomCodeComponent != nil {
return n.CustomCodeComponent
}
Expand Down Expand Up @@ -573,6 +578,9 @@ func (n *BodyBlock) GetChildren() []Node {
if n.YoutubeVideo != nil {
return n.YoutubeVideo.GetChildren()
}
if n.VimeoVideo != nil {
return n.VimeoVideo.GetChildren()
}
if n.CustomCodeComponent != nil {
return n.CustomCodeComponent.GetChildren()
}
Expand Down Expand Up @@ -714,6 +722,12 @@ func (n *BodyBlock) UnmarshalJSON(data []byte) error {
return err
}
n.YoutubeVideo = &v
case VimeoVideoType:
var v VimeoVideo
if err := json.Unmarshal(data, &v); err != nil {
return err
}
n.VimeoVideo = &v
case CustomCodeComponentType:
var v CustomCodeComponent
if err := json.Unmarshal(data, &v); err != nil {
Expand Down Expand Up @@ -800,6 +814,8 @@ func (n *BodyBlock) MarshalJSON() ([]byte, error) {
return json.Marshal(n.Video)
case n.YoutubeVideo != nil:
return json.Marshal(n.YoutubeVideo)
case n.VimeoVideo != nil:
return json.Marshal(n.VimeoVideo)
case n.CustomCodeComponent != nil:
return json.Marshal(n.CustomCodeComponent)
case n.ClipSet != nil:
Expand Down Expand Up @@ -858,6 +874,8 @@ func makeBodyBlock(n Node) (*BodyBlock, error) {
return &BodyBlock{Video: n.(*Video)}, nil
case YoutubeVideoType:
return &BodyBlock{YoutubeVideo: n.(*YoutubeVideo)}, nil
case VimeoVideoType:
return &BodyBlock{VimeoVideo: n.(*VimeoVideo)}, nil
case CustomCodeComponentType:
return &BodyBlock{CustomCodeComponent: n.(*CustomCodeComponent)}, nil
case ClipSetType:
Expand Down Expand Up @@ -2694,6 +2712,25 @@ func (n *YoutubeVideo) GetChildren() []Node {

func (n *YoutubeVideo) AppendChild(_ Node) error { return ErrCannotHaveChildren }

type VimeoVideo struct {
Type string `json:"type"`
URL string `json:"url,omitempty"`
}

func (n *VimeoVideo) GetType() string {
return n.Type
}

func (n *VimeoVideo) GetEmbedded() Node {
return nil
}

func (n *VimeoVideo) GetChildren() []Node {
return nil
}

func (n *VimeoVideo) AppendChild(_ Node) error { return ErrCannotHaveChildren }

type CustomCodeComponent struct {
Type string `json:"type"`
ID string `json:"id"`
Expand Down
6 changes: 5 additions & 1 deletion libraries/from-bodyxml/go/html_transformers.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,8 +142,12 @@ var defaultTransformers = map[string]transformer{
Type: contenttree.YoutubeVideoType,
URL: url,
}
} else if strings.Contains(url, "vimeo.com") {
return &contenttree.VimeoVideo{
Type: contenttree.VimeoVideoType,
URL: url,
}
}
// NOTE: Vimeo not yet in spec
} else if attr(a, "data-asset-type") == "tweet" {
url := attr(a, "href")
return &contenttree.Tweet{
Expand Down
3 changes: 3 additions & 0 deletions libraries/to-external-bodyxml/go/transform.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,9 @@ func transformNode(n contenttree.Node) (string, error) {
case *contenttree.YoutubeVideo:
return fmt.Sprintf("<a data-asset-type=\"video\" data-embedded=\"true\" href=\"%s\"></a>", node.URL), nil

case *contenttree.VimeoVideo:
return fmt.Sprintf("<a data-asset-type=\"video\" data-embedded=\"true\" href=\"%s\"></a>", node.URL), nil

case *contenttree.Tweet:
return fmt.Sprintf("<a data-asset-type=\"tweet\" data-embedded=\"true\" href=\"%[1]s\">%[1]s</a>", node.ID), nil

Expand Down
22 changes: 22 additions & 0 deletions schemas/body-tree.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@
{
"$ref": "#/definitions/ContentTree.transit.YoutubeVideo"
},
{
"$ref": "#/definitions/ContentTree.transit.VimeoVideo"
},
{
"$ref": "#/definitions/ContentTree.transit.Timeline"
},
Expand Down Expand Up @@ -1537,6 +1540,25 @@
],
"type": "object"
},
"ContentTree.transit.VimeoVideo": {
"additionalProperties": false,
"properties": {
"data": {},
"type": {
"const": "vimeo-video",
"type": "string"
},
"url": {
"description": "Vimeo embed URL e.g. https://player.vimeo.com/player/<id> or https://vimeo.com/<id>",
"type": "string"
}
},
"required": [
"type",
"url"
],
"type": "object"
},
"ContentTree.transit.YoutubeVideo": {
"additionalProperties": false,
"properties": {
Expand Down
22 changes: 22 additions & 0 deletions schemas/content-tree.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,9 @@
{
"$ref": "#/definitions/ContentTree.full.YoutubeVideo"
},
{
"$ref": "#/definitions/ContentTree.full.VimeoVideo"
},
{
"$ref": "#/definitions/ContentTree.full.Timeline"
},
Expand Down Expand Up @@ -2396,6 +2399,25 @@
],
"type": "object"
},
"ContentTree.full.VimeoVideo": {
"additionalProperties": false,
"properties": {
"data": {},
"type": {
"const": "vimeo-video",
"type": "string"
},
"url": {
"description": "Vimeo embed URL e.g. https://player.vimeo.com/player/<id> or https://vimeo.com/<id>",
"type": "string"
}
},
"required": [
"type",
"url"
],
"type": "object"
},
"ContentTree.full.YoutubeVideo": {
"additionalProperties": false,
"properties": {
Expand Down
22 changes: 22 additions & 0 deletions schemas/transit-tree.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,9 @@
{
"$ref": "#/definitions/ContentTree.transit.YoutubeVideo"
},
{
"$ref": "#/definitions/ContentTree.transit.VimeoVideo"
},
{
"$ref": "#/definitions/ContentTree.transit.Timeline"
},
Expand Down Expand Up @@ -1562,6 +1565,25 @@
],
"type": "object"
},
"ContentTree.transit.VimeoVideo": {
"additionalProperties": false,
"properties": {
"data": {},
"type": {
"const": "vimeo-video",
"type": "string"
},
"url": {
"description": "Vimeo embed URL e.g. https://player.vimeo.com/player/<id> or https://vimeo.com/<id>",
"type": "string"
}
},
"required": [
"type",
"url"
],
"type": "object"
},
"ContentTree.transit.YoutubeVideo": {
"additionalProperties": false,
"properties": {
Expand Down
4 changes: 4 additions & 0 deletions tests/body-tree-to-external-bodyxml/input/sustainable-views-kitchen-sink-20240129.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,10 @@
"value": "Pharetra diam sit amet nisl suscipit. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Felis donec et odio pellentesque diam. Tempor id eu nisl nunc mi. Ut venenatis tellus in metus vulputate eu. Sed vulputate odio ut enim blandit. Justo laoreet sit amet cursus. Amet consectetur adipiscing elit pellentesque. Potenti nullam ac tortor vitae. Bibendum neque egestas congue quisque egestas diam in arcu. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Tincidunt ornare massa eget egestas purus viverra accumsan. Turpis cursus in hac habitasse. Nisl pretium fusce id velit ut tortor pretium viverra. Cras sed felis eget velit aliquet sagittis id."
}
]
},
{
"type": "vimeo-video",
"url": "https://vimeo.com/943439035"
}
],
"version": 1
Expand Down
Loading