-- 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](ftd/common/).

`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`](ftd/built-in-types/#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`](ftd/built-in-types/#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`](ftd/built-in-types/#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`](ftd/built-in-types/#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`](ftd/built-in-types/#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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.