Video Poster

A video slide block. When clicked, it opens the video player in full screen. Its behavior regarding sizes and styles is similar to <image>.

Properties

src*: string | { url, width?, height?}

Parameters for the source image. A string with the source URL or an object with the following fields:

• url*: string

  A string with the source URL.

• width*: number

  The width of the source. Should be specified along with height. Specifying both width and height prevents potential layout shifts on the first page load since the actual size of the image is unknown until it starts loading. The specified size may differ from the actual size, and it is this size that is considered during display.

• height*: number

  The height of the source. See width above.

video: <video>

<video> block to be displayed in full screen.

resizeMode: string

Default: cover

The method of placing the image when the aspect ratios of the display differ from the source.

• cover  — The image fits, covering the entire display area. Part of the image that does not fit becomes invisible. Aspect ratios are preserved.

• contain  — The image fits entirely, with margins on the sides where data is missing. Aspect ratios are preserved.

• stretch  — The image stretches to the boundaries of the area. Aspect ratios are ignored.

style

Changes the appearance, positioning, and geometry of the block.

• width, maxWidth, minWidth
  Width of the block. More details.

• height, maxHeight, minHeight
  Height of the block. More details.

• padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft
  Internal padding of the container. More details.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  External margins of the block. More details.

• position
  Positioning method of the block: relative or absolute. More details.

• top, right, bottom, left
  Offset from the original position. More details.

• border
  Setting borders for the block on all four sides: thickness, style, and color. More details.

• borderTop, borderRight, borderBottom, borderLeft
  Setting individual borders for the sides of the block: thickness and color. More details.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Rounding the corners of the borders. More details.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Thickness of the borders. More details.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Color of the borders. More details.

• backgroundColor
  Background color of the block. More details.

• backgroundGradient
  Background gradient of the block. More details.

• opacity
  Opacity of the entire block and its contents. More details.

• elevation
  Shadow height. More details.

• shadowColor
  Color of the block's shadow. More details.

• flexBasis
  Initial size of the block along the main axis of the container. More details.

• flexGrow
  Growth factor of the block along the main axis of the container. More details.

• flexShrink
  Shrinkage factor of the block along the main axis of the container. More details.

• flex
  Defines the size behavior of the block (growth, shrinkage, and initial size) along the main axis of the container. More details.

• alignSelf
  Alignment of a specific block across the main axis of the container. More details.

• transform
  Transformation of the geometry of blocks and containers in 2D and 3D space. More details.

Example

Minimal example. Without specifying src.width and src.height. Possible layout shift on the first page load.

Example with src.width and src.height specified.

Example with source image dimensions differing from the actual ones. The property resizeMode='contain' will fit the image within the proportions of the specified size.