How do I add a custom download button?

[gajraj-gan]

Same as title, as far as I have read the docs we can access the data of video using the hooks but how do i add a custom button for dowloading?

[mihar-22]

Create a download link like so:

<a href="path_to_video_file" download="video_file_name" aria-label="Download video">
  <!-- icon here. -->
</a>

[gajraj-gan]

How do i add it in the player? I am using React/NextJS.

[mihar-22]

You have to build a custom UI, see our examples:

https://github.com/vidstack/examples

[mihar-22]

With our new layout slots for React, you can now easily insert/replace content inside our Default Layout. That should make this type of thing much easier for anyone in the future.

[gajraj-gan]

Thanks, it is perfect :)

[gajraj-gan]

I did this.

<DefaultVideoLayout
          icons={defaultLayoutIcons}
          slots={{
            beforeSettingsMenu: (
              <button type="button" onClick={() => window.open(src, '_blank')}>
                <DownloadIcon color="white" size={32} />
              </button>
            )
          }}
        />