-- ftd.video:
src: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
controls: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

Output

Attributes

ftd.video accepts the below attributes as well all the common attributes.

`src`

Required: True

The src attribute specifies the path to the video to embed. This is the only required attribute. src stores video URLs for both light and dark mode.

Video

-- ftd.video:
src: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
controls: true
src: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
controls: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

Output: Video

Video using assets

-- import: fastn.com/assets

Lang:

ftd

Then, use the files field of assets variable to access files present in the package. For example:

Video using assets

-- import: fastn.com/assets

-- ftd.video:
src: $assets.files.videos.bunny.mp4
controls: true
src: $assets.files.videos.bunny.mp4
controls: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

The output will look same as above.

`controls`

Type: optional boolean

Required: False

If this attribute value is set to true, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback. If this attribute value is set to true, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

In the first example below, the controls attribute has been set to true, which is why the controls are being shown. However, in the second example below, the controls attribute has been set to false, which is why the controls are not being shown on that video. In the first example below, the controls attribute has been set to true, which is why the controls are being shown. However, in the second example below, the controls attribute has been set to false, which is why the controls are not being shown on that video.

Sample code using controls

Input

-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
controls: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
controls: false
muted: true
autoplay: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

Output

`muted`

Type: optional boolean

Required: False

A Boolean attribute that indicates the default setting of the audio contained in the video. If set to true, the audio will be initially silenced. A Boolean attribute that indicates the default setting of the audio contained in the video. If set to true, the audio will be initially silenced.

Sample code using muted

Input

-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
muted: true
muted: true
controls: true
autoplay: true
autoplay: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

Output

`autoplay`

Type: optional boolean

Required: False

A Boolean attribute; if set to true, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. A Boolean attribute; if set to true, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.

Note: The autoplay option is only respected by the browser if the video is muted.

Sample code using autoplay

Input

-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
autoplay: true
autoplay: true
muted: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

Output

`loop`

Type: optional boolean

Required: False

A Boolean attribute; if set to true, the video will play in a loop.

Sample code using loop

Input

-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
loop: true
autoplay: true
muted: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

Output

`poster`

Type: optional string

Required: False

A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

Sample code using poster

Input

-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
poster: https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg
controls: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

Output

`fit`

Type: optional string

Required: False

The fit property determines how a ftd.video element should be adjusted to match its container size. It is similar to the object-fit CSS property.

This property offers various options for the content to adapt to the container, such as "maintaining the aspect ratio" or "expanding to occupy the available space fully."

Sample code using fit

Input

-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
poster: https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg
controls: true
width.fixed.px: 400
height.fixed.px: 300
fit: contain

Lang:

ftd

Output