Nerfing Powerful Megalomaniacs

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    imgix logo

    ix-video is an imgix video custom element that works anywhere.

    npm version circleci


    • Node v12+

    • Browsers with Custom Elements V1 and Shadow DOM support, e.g. Chrome, Firefox, Safari, Edge (79+)

    Browsers without native custom element support require a polyfill.

    For Node/browser versions without es6 module support, you'll need to use a bundler like webpack or parcel to bundle the custom element.


    Install this package in your project:

    npm i @imgix/ix-video

    Or add it from a CDN:



    For advanced usage instructions, customizations, and more, please see this project's complete documentation site.

    These docs also host examples of how to use this component inside your React, Vue, or other web apps.

    Using <ix-video> on a static HTML static page

    Below is an example of how to import and use the ix-video custom element from a direct import or CDN on a static HTML page.

    <html lang="en">
        <title>ix-video in a static HTML file</title>
        <!-- Note: type 'module' here is important -->
        <script type="module">
          import {IxVideo} from './node_modules/@imgix/ix-video/dist/index.bundled.js';
        <!-- Alternatively, the component can be loaded via a CDN -->
        <script type="module" src=""></script>
        <h1>There is no bundler or bundling involved!</h1>


    source: string, required

    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 and HLS media types.

    data-setup: string, optional (defaults to '{}')

    Sets Video.js specific options. See video.js documentation for examples.

    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.

    controls: boolean, optional (defaults to false)

    Show/hide the player controls.

    width: string, optional

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

    height: string, optional

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

    poster: string, optional

    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.


    npm i @imgix/ix-video

    DownloadsWeekly Downloads






    Unpacked Size

    5.75 MB

    Total Files


    Last publish


    • atlawrie
    • imgix-company
    • czacharias
    • sherwinski
    • cnoble
    • matt-imgix
    • heyitsbryanm
    • ultimatealf
    • edsz
    • lball
    • vuryanh