ix-video v1.x

# Attributes

The component is designed to mimic the <video> tag API (opens new window) so most of its attributes (opens new window) are also supported by the <ix-video> tag.

You can find a list of the supported <video> element attributes here (opens new window)

# controls

boolean, optional (defaults to false)

Show/hide the player controls.

# data-setup

string, optional (defaults to '{}')

Sets Video.js specific options. See video.js documentation (opens new window) for examples.

click to see example 
<ix-video
  source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
  controls
  data-setup='{"playbackRates": [0.5, 1, 1.5, 2]}'
>
</ix-video>
1
2
3
4
5
6

# fixed

boolean, optional (defaults to false)

Will force the player to be a fixed size. This is useful if you want to use the player in a layout that has a fixed dimension. Without the fixed attribute, the player will be responsive to the size of the container it is placed in.

click to see example 
<ix-video
  source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
  height="200"
  fixed
  controls
>
</ix-video>
1
2
3
4
5
6
7

# height

string, optional (defaults to undefined)

Sets the video player's height. If fixed attribute is set, the player will not automatically resize to fit inside the container's dimensions.

height should always be used along with `width` or `fixed`

When fixed is not set, the player will always fill the available width of the container. This means that, if the height is set to a value is so that the video's aspect ratio would be changed, the height value will be ignored.

click to see example 
<ix-video
  source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
  height="212"
  width="400"
  controls
>
</ix-video>
1
2
3
4
5
6
7

# poster

string, optional (defaults to undefined)

The video's poster image URL. The poster attribute will automatically try to resize the poster image to fit the video player's dimensions, assuming the attribute is given an imgix image URL.

click to see example 
<ix-video
  controls
  preload="none"
  poster="https://sdk-test.imgix.net/amsterdam.jpg"
  source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
>
</ix-video>
1
2
3
4
5
6
7

# source

string, required (defaults to undefined)

The video's source URL. Should be used in combination with type attribute when the source is not an HLS source.

# type

string, optional (defaults to 'application/x-mpegURL')

The media type of the video. Supports standard video media types (opens new window) and HLS media types.

click to see example 
<ix-video
  controls
  source="https://assets.imgix.net/videos/girl-reading-book-in-library.mp4"
  type="video/mp4"
>
</ix-video>
1
2
3
4
5
6

# width

string, optional (defaults to undefined)

The width of the video player. If fixed attribute is set, the player will not automatically resize to fit inside the container's dimensions.

width should always be used along with `height` or `fixed`

When fixed is not set, the player will always fill the available width of the container.

click to see example 
<ix-video
  controls
  width="300"
  source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
>
</ix-video>
1
2
3
4
5
6

←