# Creating a Flex Message including a video
This page explains how to create a flex message including a video. For more information about how to send the created flex message, see Sending Flex Messages.
# Overview
Using a video component of Flex Message, you can display a video in the hero block.
The flex message above can be created by the JSON data below:
{
"type": "bubble",
"size": "mega",
"hero": {
"type": "video",
"url": "https://example.com/video.mp4",
"previewUrl": "https://example.com/video_preview.jpg",
"altContent": {
"type": "image",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"url": "https://example.com/image.jpg"
},
"aspectRatio": "20:13"
}
}
Also, unlike a video message, you can build a message with a complex layout including a video.
The flex message above can be created by the JSON data below:
{
"type": "bubble",
"size": "mega",
"hero": {
"type": "video",
"url": "https://example.com/video.mp4",
"previewUrl": "https://example.com/video_preview.png",
"altContent": {
"type": "image",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"url": "https://example.com/image.png"
},
"action": {
"type": "uri",
"label": "More information",
"uri": "http://linecorp.com/"
},
"aspectRatio": "20:13"
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "Brown Cafe",
"weight": "bold",
"size": "xl"
},
{
"type": "box",
"layout": "baseline",
"margin": "md",
"contents": [
{
"type": "icon",
"size": "sm",
"url": "https://example.com/star.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://example.com/star.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://example.com/star.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://example.com/star.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://example.com/gray_star.png"
},
{
"type": "text",
"text": "4.0",
"size": "sm",
"color": "#999999",
"margin": "md",
"flex": 0
}
]
},
{
"type": "box",
"layout": "vertical",
"margin": "lg",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Place",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "YOTSUYA TOWER, 1-6-1 Yotsuya, Tokyo",
"wrap": true,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
},
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Time",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "10:00 - 23:00",
"wrap": true,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
}
]
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "CALL",
"uri": "https://linecorp.com"
}
},
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "WEBSITE",
"uri": "https://linecorp.com"
}
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"margin": "sm"
}
],
"flex": 0
}
}
# Use conditions of the video component
The following conditions must be met to use the video component:
- The video component is specified directly under the hero block
kilo,megaorgigais specified as the value of thesizeproperty of the bubble- The bubble is not the child element of a carousel
# Video aspect ratio
A very wide or tall video may be cropped when played in some environments.
Also, the aspect ratio of the video specified in the url property and the following two aspect ratios should be the same. If these aspect ratios are different, the layout may result in an unexpected layout:
- The aspect ratio specified by the
aspectRatioproperty - The aspect ratio of the preview image specified by the
previewUrlproperty
# URI action
Using the action property, you can specify a URI action. The label for a URI action will be displayed in the following three places:
- Chat room (when a video finishes playing)
- Video player (while a video is playing)
- Video player (when a video finishes playing)
Specifying a URI action, you can open a specified URL in LINE 's in-app browser or call a specified phone number in a call app.
For more information about the URL action, see URI action in the Messaging API reference.
# How to play a video
If the video isn't playing properly, make sure the video is a supported file type and the HTTP server hosting the video supports HTTP range requests. For more information about a supported file type, see Video in the Messaging API reference.
A video can be played in the following two ways:
# Auto-play in a chat room
Users can check whether or not a video will be played automatically in Settings > Photos & videos > Auto-play videos on the LINE app.
| Auto-play videos setting | auto-play |
|---|---|
| On mobile & Wi-Fi | A video will be played automatically |
| On Wi-Fi only | A video will be played automatically only on Wi-Fi |
| Never | A video won't be played automatically |
Auto-play is not supported on LINE for macOS and Windows.
# Screen when a video finishes playing
When a video finishes playing, Play and More information will be displayed on the video.
When the user taps Play, a video player will open and the video will replay. For more information, see Play manually in a video player.
More information is the label for a URI action specified in a video component. You can specify any labels. The label won't be displayed if a URI action is not specified. For more information, see URI action.
# Play manually in a video player
When the user taps a video in a chat room, the video will play in a video player.
# Screen while a video is playing
Done and More information will be displayed at the top of a video player while a video is playing.
When the user tap Done, the video player will close and return to the chat room. At this time, if the conditions for auto-playing a video are met, the rest of the video will be played in the chat room. For more information, see Auto-play in a chat room.
More information is the label for a URI action specified in a video component. You can specify any labels. The label won't be displayed if a URI action is not specified. For more information, see URI action.
# Screen when a video finishes playing
When a video finishes playing, Replay and More information will be displayed on the video.
When the user taps Replay, the video will replay in the video player.
More information is the label for a URI action specified in a video component. You can specify any labels. The label won't be displayed if a URI action is not specified. For more information, see URI action.
# Display on version of LINE that doesn't support the video component
If the version of LINE is lower than the version that supports the video component, the component specified as the value of the altContent property will be displayed. Specify a box or an image for the altContent property.
# Display on Flex Message Simulator
You can't preview a video on Flex Message Simulator. In the preview area of Flex Message Simulator, alternative content will be displayed as well as Display on version of LINE that doesn't support the video component.
Send a test message and check the message on your LINE app to check the video included in the message created with Flex Message Simulator. You can send a test message from Send... at the right top of Flex Message Simulator.
# Related pages
- Sending Flex Messages
- Flex Message elements
- Flex Message layout
- Flex Message (Messaging API reference)
- Flex Message Simulator