diff --git a/ui/js/actions/content.js b/ui/js/actions/content.js
index a52634bca..e6b6a30a1 100644
--- a/ui/js/actions/content.js
+++ b/ui/js/actions/content.js
@@ -209,7 +209,7 @@ export function doLoadVideo(uri) {
   }
 }
 
-export function doPurchaseUri(uri) {
+export function doPurchaseUri(uri, purchaseModalName) {
   return function(dispatch, getState) {
     const state = getState()
     const balance = selectBalance(state)
@@ -244,7 +244,7 @@ export function doPurchaseUri(uri) {
     if (cost > balance) {
       dispatch(doOpenModal('notEnoughCredits'))
     } else {
-      dispatch(doOpenModal('affirmPurchase'))
+      dispatch(doOpenModal(purchaseModalName))
     }
 
     return Promise.resolve()
diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js
index e9dc10705..8e9555a14 100644
--- a/ui/js/component/fileActions/index.js
+++ b/ui/js/component/fileActions/index.js
@@ -66,7 +66,7 @@ const perform = (dispatch) => ({
     dispatch(doDeleteFile(fileInfo, deleteFromComputer))
   },
   openModal: (modal) => dispatch(doOpenModal(modal)),
-  startDownload: (uri) => dispatch(doPurchaseUri(uri)),
+  startDownload: (uri) => dispatch(doPurchaseUri(uri, 'affirmPurchase')),
   loadVideo: (uri) => dispatch(doLoadVideo(uri)),
 })
 
diff --git a/ui/js/component/video/index.js b/ui/js/component/video/index.js
index 5566da840..423ff533a 100644
--- a/ui/js/component/video/index.js
+++ b/ui/js/component/video/index.js
@@ -47,7 +47,7 @@ const makeSelect = () => {
 
 const perform = (dispatch) => ({
   loadVideo: (uri) => dispatch(doLoadVideo(uri)),
-  purchaseUri: (uri) => dispatch(doPurchaseUri(uri)),
+  purchaseUri: (uri) => dispatch(doPurchaseUri(uri, 'affirmPurchaseAndPlay')),
   closeModal: () => dispatch(doCloseModal()),
 })
 
diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx
index e29a9bff8..d7a1f274f 100644
--- a/ui/js/component/video/view.jsx
+++ b/ui/js/component/video/view.jsx
@@ -52,13 +52,12 @@ class VideoPlayButton extends React.Component {
             className="video__play-button"
             icon="icon-play"
             onClick={this.onWatchClick.bind(this)} />
-      {modal}
       <Modal contentLabel="Not enough credits" isOpen={modal == 'notEnoughCredits'} onConfirmed={closeModal}>
         You don't have enough LBRY credits to pay for this stream.
       </Modal>
       <Modal
         type="confirm"
-        isOpen={modal == 'affirmPurchase'}
+        isOpen={modal == 'affirmPurchaseAndPlay'}
         contentLabel="Confirm Purchase"
         onConfirmed={this.onPurchaseConfirmed.bind(this)}
         onAborted={closeModal}>
@@ -72,8 +71,6 @@ class VideoPlayButton extends React.Component {
   }
 }
 
-const plyr = require('plyr')
-
 class Video extends React.Component {
   constructor(props) {
     super(props)
@@ -114,7 +111,7 @@ class Video extends React.Component {
         isPlaying || isLoading ?
           (!isReadyToPlay ?
             <span>this is the world's worst loading screen and we shipped our software with it anyway... <br /><br />{loadStatusMessage}</span> :
-            <VideoPlayer poster={metadata.thumbnail} autoplay={isPlaying} downloadPath={fileInfo.download_path} />) :
+            <VideoPlayer filename={fileInfo.file_name} poster={metadata.thumbnail} downloadPath={fileInfo.download_path} />) :
         <div className="video__cover" style={{backgroundImage: 'url("' + metadata.thumbnail + '")'}}>
           <VideoPlayButton startPlaying={this.startPlaying.bind(this)} {...this.props} />
         </div>
@@ -123,18 +120,28 @@ class Video extends React.Component {
   }
 }
 
+const from = require('from2')
+const player = require('render-media')
+const fs = require('fs')
+
 class VideoPlayer extends React.Component {
   componentDidMount() {
     const elem = this.refs.video
     const {
-      autoplay,
       downloadPath,
       contentType,
+      filename,
     } = this.props
-    const players = plyr.setup(elem)
-    if (autoplay) {
-      players[0].play()
+    const file = {
+      name: filename,
+      createReadStream: (opts) => {
+        return fs.createReadStream(downloadPath, opts)
+      }
     }
+    player.render(file, elem, {
+      autoplay: true,
+      controls: true,
+    })
   }
 
   render() {
@@ -145,7 +152,7 @@ class VideoPlayer extends React.Component {
     } = this.props
 
     return (
-      <video controls id="video" ref="video" style={{backgroundImage: "url('" + poster + "')"}} >
+      <video controls ref="video" style={{backgroundImage: "url('" + poster + "')"}} >
         <source src={downloadPath} type={contentType} />
       </video>
     )
diff --git a/ui/package.json b/ui/package.json
index d81bc9116..ad77b4b75 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -22,9 +22,9 @@
     "babel-cli": "^6.11.4",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
+    "from2": "^2.3.0",
     "jshashes": "^1.0.6",
     "node-sass": "^3.8.0",
-    "plyr": "^2.0.12",
     "rc-progress": "^2.0.6",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
@@ -33,6 +33,7 @@
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",
     "redux-thunk": "^2.2.0",
+    "render-media": "^2.10.0",
     "reselect": "^3.0.0"
   },
   "devDependencies": {
diff --git a/ui/webpack.config.js b/ui/webpack.config.js
index 491a5e4d5..59c2fd6d5 100644
--- a/ui/webpack.config.js
+++ b/ui/webpack.config.js
@@ -42,7 +42,11 @@ module.exports = {
           cacheDirectory: true,
           presets:[ 'es2015', 'react', 'stage-2' ]
         }
-      }
+      },
+      {
+        test: /mime\.json$/,
+        loader: 'json',
+      },
     ]
   },
   target: 'electron-main',
diff --git a/ui/webpack.dev.config.js b/ui/webpack.dev.config.js
index 15ec5652d..232f6dcc3 100644
--- a/ui/webpack.dev.config.js
+++ b/ui/webpack.dev.config.js
@@ -48,7 +48,11 @@ module.exports = {
           cacheDirectory: true,
           presets:[ 'es2015', 'react', 'stage-2' ]
         }
-      }
+      },
+      {
+        test: /mime\.json$/,
+        loader: 'json',
+      },
     ]
   },
   target: 'electron-main',