I think you may want to update your copy

.storybook/addons.js

@@ -1,5 +1,3 @@
-//  To get our default addons (actions and links)
-import '@kadira/storybook/addons';
 //  To add the knobs addon
-import '@kadira/storybook-addon-knobs/register'
-import '@kadira/storybook-addon-options/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -1,8 +1,20 @@
-import { configure, setAddon } from '@kadira/storybook';
-import infoAddon from '@kadira/react-storybook-addon-info';
-import { setOptions } from '@kadira/storybook-addon-options';
+import { configure, setAddon } from '@storybook/react';
+import { setDefaults } from '@storybook/addon-info';
+import { setOptions } from '@storybook/addon-options';
 
-setAddon(infoAddon);
+// setDefaults({
+//   header: false, // Toggles display of header with component name and description
+//   inline: true, // Displays info inline vs click button to view
+//   source: true, // Displays the source of story Component
+//   propTables: [/* Components used in story */], // displays Prop Tables with this components
+//   propTablesExclude: [], // Exclude Components from being shown in Prop Tables section
+//   styles: {}, // Overrides styles of addon
+//   marksyConf: {}, // Overrides components used to display markdown. Warning! This option's name will be likely deprecated in favor to "components" with the same API in 3.3 release. Follow this PR #1501 for details
+//   maxPropsIntoLine: 1, // Max props to display per line in source code
+//   maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name
+//   maxPropArrayLength: 10, // Displays the first 10 items in the default prop array
+//   maxPropStringLength: 100, // Displays the first 100 characters in the default prop string
+// });
 
 setOptions({
   name: 'React Plyr',

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.8/plyr.css">

.storybook/stories/index.js

@@ -1,35 +1,142 @@
-import React, { Component } from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { withKnobs, text, number, select } from '@kadira/storybook-addon-knobs';
-import withWrapper from './withWrapper'
+import React, { Component, Fragment } from 'react';
+import { storiesOf } from '@storybook/react';
+// import { withKnobs, text, number, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { withInfo } from '@storybook/addon-info';
+
+import './withWrapper';
+import './updateVideoSource';
 
 import Plyr from '../../src';
 
 const stories = storiesOf('React Plyr', module);
-stories.addDecorator(withKnobs);
 
-stories.addWithInfo('Default Youtube video', () => (
+stories.add('Simple Youtube video', withInfo()(() =>
+  <Plyr videoId="CDFN1VatiJA" debug />
+))
+
+stories.add('Video with all Controls', withInfo()(() =>
   <Plyr
-    videoId="CDFN1VatiJA"
+    videoId="bTqVqk7FSmY"
+    controls={[
+      'play-large', // The large play button in the center
+      'restart', // Restart playback
+      'rewind', // Rewind by the seek time (default 10 seconds)
+      'play', // Play/pause playback
+      'fast-forward', // Fast forward by the seek time (default 10 seconds)
+      'progress', // The progress bar and scrubber for playback and buffering
+      'current-time', // The current time of playback
+      'duration', // The full duration of the media
+      'mute', // Toggle mute
+      'volume', // Volume control
+      'captions', // Toggle captions
+      'settings', // Settings menu
+      'pip', // Picture-in-picture (currently Safari only)
+      'airplay', // Airplay (currently Safari only)
+      'fullscreen', // Toggle fullscreen
+    ]}
   />
 ))
-stories.addWithInfo('Default Vimeo video', () => (
+
+stories.add('Simple Vimeo video', withInfo()(() =>
   <Plyr
     type="vimeo"
     videoId="https://vimeo.com/189789787"
   />
 ))
-stories.addWithInfo('Player with autoplay and callbacks', () => (
+
+stories.add('Default video with file address', withInfo()(() =>
+  <Plyr
+    type="video"
+    url="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
+    title="View From A Blue Moon"
+    poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+  />
+))
+
+stories.add('Default video with multiple file addresses', withInfo()(() =>
   <Plyr
-    videoId="MM0XgD89Tr8"
+    type="video"
+    title="View From A Blue Moon"
+    poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+    sources={[
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
+        type: 'video/mp4',
+        size: 576,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
+        type: 'video/mp4',
+        size: 720,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
+        type: 'video/mp4',
+        size: 1080,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
+        type: 'video/mp4',
+        size: 1440,
+      },
+    ]}
+  />
+))
+
+stories.add('Player with autoplay and callbacks', withInfo()(() =>
+  <Plyr
+    videoId="M6_a2wBK-yc"
+    volume={0.4}
     autoplay
-    onReady={console.log('Is Ready!')}
-    onPlay={() => console.log('Play!')}
-    onPause={() => console.log('Paused!')}
-    onEnd={() => console.log('Video has finished!')}
-    onEnterFullscreen={() => console.log('Fullscreen is enabled')}
-    onExitFullscreen={() => console.log('Fullscreen is disabled')}
-    onVolumeChange={volume => console.log('volume changed', volume)}
-    onSeeked={time => console.log('seeked!', time)}
+    onReady={action('Video is ready!')}
+    onPlay={action('Play!')}
+    onPause={action('Video is paused')}
+    onEnd={action('Video has finished!')}
+    onEnterFullscreen={action('Fullscreen is enabled')}
+    onExitFullscreen={action('Fullscreen is disabled')}
+    onVolumeChange={action('Volume changed')}
+    onSeeked={action('Seeked')}
+  />
+))
+
+stories.add('Audio player with url', withInfo()(() =>
+  <Plyr
+    type="audio"
+    url="https://archive.org/download/testmp3testfile/mpthreetest.mp3"
   />
-));
+))
+
+stories.add('Audio player with sources', withInfo()(() =>
+  <Plyr
+    type="audio"
+    sources={[
+      {
+        src: "https://archive.org/download/testmp3testfile/mpthreetest.ogg",
+        type: "audio/ogg"
+      },
+      {
+        src: "https://archive.org/download/testmp3testfile/mpthreetest.mp3",
+        type: "audio/mpeg"
+      }
+    ]}
+  />
+))
+
+stories.add('Multiple players on same page', withInfo()(() => (
+  <Fragment>
+    {[
+      "https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4",
+      "https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4",
+      "https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4"
+    ].map((video, index) => (
+      <div key={index} style={{ width: 540 }}>
+        <Plyr
+          url={video}
+          type="video"
+          className={`react-plyr-${index}`}
+        />
+      </div>
+    ))}
+  </Fragment>
+)))

.storybook/stories/updateVideoSource.js

@@ -0,0 +1,44 @@
+import React, { Component, Fragment } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withInfo } from '@storybook/addon-info';
+
+import Plyr from '../../src';
+
+const stories = storiesOf('React Plyr', module);
+
+const videos = {
+  youtube: { id: 'yGh0bjzj4IQ', provider: 'youtube' },
+  vimeo: { id: '76979871', provider: 'vimeo' },
+};
+
+class Wrapper extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      video: 'youtube'
+    }
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <Plyr
+          videoId={videos[this.state.video].id}
+          provider={videos[this.state.video].provider}
+          ref={plyr => this.plyr = plyr}
+        />
+
+        <hr />
+
+        <button onClick={() => this.setState({ video: 'youtube' })}>Set Youtube video source</button>
+        <button onClick={() => this.setState({ video: 'vimeo' })}>Set Vimeo video source</button>
+      </Fragment>
+    );
+  }
+}
+
+export default stories.add('Updating video on the fly', withInfo()(() =>
+  <Wrapper />
+));