Block Kit - Video Block

Block Kit is the UI framework for Slack apps. Video blocks are a new addition to the Blocks family which can be used to embed videos on app surfaces (e.g., unfurls, messages, threads, modals, App Home -- anywhere you can put blocks!).

Requirements

• Slack app installed on a workspace
• App requirements:
  • Unfurl domains should include all domains that will be embedded by your app
  • New scope to be added to make users aware of this feature at installation

Block Schema

Property	Type	Description
video_url (Mandatory)	string	The URL to be embedded
thumbnail_url (Mandatory)	string	The thumbnail image URL
alt_text (Mandatory)	string	Tooltip for the video - Accessibility Requirement
title (Mandatory)	Object	Video Title in plain text format
title_url	string	Hyperlink for the title text. Should correspond to the non-embeddable URL for the video
author_name	string	Video author name to be displayed.
provider_icon_url	string	Icon for the video provider - ex. Youtube Icon
provider_name	string	App/Domain name ex. Youtube
description	Object	Description for video in plain text format

The metadata received in the Block payload will be used to construct the description, provider, and title of the video in all clients. Developers have the flexibility to leave non-mandatory fields null and use other blocks to format this content.

Sample Payload

{
	"blocks": [
		{
			"type": "section",
			"text": {
				"type": "plain_text",
				"text": "I think it's super cool",
				"emoji": true
			}
		},
		{
			"type": "video",
			"title": {
				"type": "plain_text",
				"text": "How to use Slack?",
				"emoji": true
			},
			"title_url": "https://www.youtube.com/watch?v=RRxQQxiM7AA",
			"description": {
				"type": "plain_text",
				"text": "Slack is a new way to communicate with your team. It's faster, better organised and more secure than email.",
				"emoji": true
			},
			"video_url": "https://www.youtube.com/embed/RRxQQxiM7AA?feature=oembed&autoplay=1",
			"alt_text": "How to use Slack?",
			"thumbnail_url": "https://i.ytimg.com/vi/RRxQQxiM7AA/hqdefault.jpg",
			"author_name": "Arcado Buendia",
			"provider_name": "YouTube",
			"provider_icon_url": "https://a.slack-edge.com/80588/img/unfurl_icons/youtube.png"
		}
	]
}

Video Embed Container

In the Slack web client we'll construct a double iFrame with the following structure:

<iframe width="420" height="225" src="{video_url}" frameborder="0" allow="autoplay;" allowfullscreen sandbox="allow-scripts"></iframe>`

The iFrame will only be loaded once the user clicks on the thumbnail overlay to play the video.

In mobile clients, tapping on the thumbnail sets the video as the source of a sandboxed WebView in a full screen File Carousel view that is shared across all media in Slack threads.

How does it look?

Web

iOS

Android

Limitations

• Video blocks can only be posted by apps, users are not allowed to post embedded videos directly from Block Kit Builder
• Videos to be embedded in Slack should have publicly accessible URLs; no authorization headers or cookies should be expected from the Slack clients.
• That said, since integration can be event driven (a link was shared, or a modal was opened), the app can rely on information received from the Events API payloads to make a decision on whether the viewer(s) of the content should have access. If so, the service could create a unique URL that could potentially only be accessible from Slack clients.
• The URL provided should be compatible with an embeddable iFrame for web clients and WebViews for mobile.
• Constraints:
  • Embeddable media players only (audio-only permitted)
  • No navigation is allowed
  • No scrolling
  • No overlays. Interactivity, such as likes, comments, and reactions, are allowed within your player but it shouldn't completely overlay or navigate away from the content being embedded. These interactions will be anonymous since no user data is transferred to the embedded view.