ix-video v1.x

# Customization

The ix-video player uses video-js (opens new window) and its default skin (opens new window) to style the player. Therefore, you can can target any of the video-js components and customize their appearance.

For example, if you want to change big play button color to red, you can do it by adding the following CSS class to the ix-video component:




 
 
 
 
 
 
 
 
 
 








 






<template>
  <div>
    <style>
      .red-play > .vjs-big-play-button {
        background-color: red;
        color: white;
        transition: background-color ease-in-out 0.2s;
      }
      .red-play > .video-js:hover > .vjs-big-play-button {
        background-color: coral;
        color: white;
        transition: background-color 0.2s;
      }
      .video-js:hover {
        cursor: pointer;
      }
    </style>
    <!-- 
      * Add `red-play` class to ix-video that will make the play button red
    -->
    <ix-video
      class="red-play"
      controls
      source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
    ></ix-video>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Now, on first load, the player's big play button will look like this:

← Advanced Usage →