ftd.video
ftd.video
is the kernel element used to embed video content in ftd
.-- 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
src
Required: True
Thesrc
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.-- 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
-- import: fastn.com/assets
files
field of assets
variable to access files present in the
package. For example:-- 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
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.
controls
-- 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
muted
Type: optional
boolean
Required: False
A Boolean attribute that indicates the default setting of the audio contained in the video. If set totrue
, 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.muted
-- 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
autoplay
Type: optional
boolean
Required: False
A Boolean attribute; if set totrue
, 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.autoplay
-- 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
loop
Type: optional
boolean
Required: False
A Boolean attribute; if set totrue
, the video will play in a loop.loop
-- 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
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.poster
-- 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
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.
fit
-- 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