diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 352d107e7..baeed6ef9 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -123,6 +123,16 @@ class Item extends React.PureComponent {
     this.setState({ loaded: true });
   }
 
+  handleVideoHover = ({ target: video }) => {
+    video.playbackRate = 3.0;
+    video.play();
+  }
+
+  handleVideoLeave = ({ target: video }) => {
+    video.pause();
+    video.currentTime = 0;
+  }
+
   render() {
     const { attachment, standalone, visible, dimensions, autoPlayGif, last, total } = this.props;
 
@@ -221,6 +231,28 @@ class Item extends React.PureComponent {
           <span className='media-gallery__file-extension__label'>{fileExtension}</span>
         </a>
       );
+    } else if (attachment.get('type') === 'video') {
+      const ext = attachment.get('url').split('.').pop().toUpperCase();
+      thumbnail = (
+        <a
+          className={classNames('media-gallery__item-thumbnail')}
+          href={attachment.get('url')}
+          onClick={this.handleClick}
+          target='_blank'
+          alt={attachment.get('description')}
+          title={attachment.get('description')}
+        >
+          <video
+            muted
+            loop
+            onMouseOver={this.handleVideoHover}
+            onMouseOut={this.handleVideoLeave}
+          >
+            <source src={attachment.get('url')} />
+          </video>
+          <span className='media-gallery__file-extension__label'>{ext}</span>
+        </a>
+      );
     }
 
     return (
diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index c4b458e3d..946d65210 100644
--- a/app/soapbox/features/audio/index.js
+++ b/app/soapbox/features/audio/index.js
@@ -1,147 +1,95 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { throttle } from 'lodash';
-import classNames from 'classnames';
+import { defineMessages, injectIntl } from 'react-intl';
+import { formatTime } from 'soapbox/features/video';
 import Icon from 'soapbox/components/icon';
-import { getSettings } from 'soapbox/actions/settings';
+import classNames from 'classnames';
+import { throttle } from 'lodash';
+import { getPointerPosition, fileNameFromURL } from 'soapbox/features/video';
+import { debounce } from 'lodash';
+import Visualizer from './visualizer';
 
 const messages = defineMessages({
-  play: { id: 'audio.play', defaultMessage: 'Play' },
-  pause: { id: 'audio.pause', defaultMessage: 'Pause' },
-  mute: { id: 'audio.mute', defaultMessage: 'Mute' },
-  unmute: { id: 'audio.unmute', defaultMessage: 'Unmute' },
-  hide: { id: 'audio.hide', defaultMessage: 'Hide audio' },
-  expand: { id: 'audio.expand', defaultMessage: 'Expand audio' },
-  close: { id: 'audio.close', defaultMessage: 'Close audio' },
+  play: { id: 'video.play', defaultMessage: 'Play' },
+  pause: { id: 'video.pause', defaultMessage: 'Pause' },
+  mute: { id: 'video.mute', defaultMessage: 'Mute sound' },
+  unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
+  download: { id: 'video.download', defaultMessage: 'Download file' },
 });
 
-const formatTime = secondsNum => {
-  let hours   = Math.floor(secondsNum / 3600);
-  let minutes = Math.floor((secondsNum - (hours * 3600)) / 60);
-  let seconds = secondsNum - (hours * 3600) - (minutes * 60);
+const TICK_SIZE = 10;
+const PADDING   = 180;
 
-  if (hours   < 10) hours   = '0' + hours;
-  if (minutes < 10 && hours >= 1) minutes = '0' + minutes;
-  if (seconds < 10) seconds = '0' + seconds;
-
-  return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
-};
-
-export const findElementPosition = el => {
-  let box;
-
-  if (el.getBoundingClientRect && el.parentNode) {
-    box = el.getBoundingClientRect();
-  }
-
-  if (!box) {
-    return {
-      left: 0,
-      top: 0,
-    };
-  }
-
-  const docEl = document.documentElement;
-  const body  = document.body;
-
-  const clientLeft = docEl.clientLeft || body.clientLeft || 0;
-  const scrollLeft = window.pageXOffset || body.scrollLeft;
-  const left       = (box.left + scrollLeft) - clientLeft;
-
-  const clientTop = docEl.clientTop || body.clientTop || 0;
-  const scrollTop = window.pageYOffset || body.scrollTop;
-  const top       = (box.top + scrollTop) - clientTop;
-
-  return {
-    left: Math.round(left),
-    top: Math.round(top),
-  };
-};
-
-export const getPointerPosition = (el, event) => {
-  const position = {};
-  const box = findElementPosition(el);
-  const boxW = el.offsetWidth;
-  const boxH = el.offsetHeight;
-  const boxY = box.top;
-  const boxX = box.left;
-
-  let pageY = event.pageY;
-  let pageX = event.pageX;
-
-  if (event.changedTouches) {
-    pageX = event.changedTouches[0].pageX;
-    pageY = event.changedTouches[0].pageY;
-  }
-
-  position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxH));
-  position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));
-
-  return position;
-};
-
-const mapStateToProps = state => ({
-  displayMedia: getSettings(state).get('displayMedia'),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
+export default @injectIntl
 class Audio extends React.PureComponent {
 
   static propTypes = {
     src: PropTypes.string.isRequired,
     alt: PropTypes.string,
-    sensitive: PropTypes.bool,
-    startTime: PropTypes.number,
-    detailed: PropTypes.bool,
-    inline: PropTypes.bool,
-    cacheWidth: PropTypes.func,
-    visible: PropTypes.bool,
-    onToggleVisibility: PropTypes.func,
+    poster: PropTypes.string,
+    duration: PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    editable: PropTypes.bool,
+    fullscreen: PropTypes.bool,
     intl: PropTypes.object.isRequired,
-    link: PropTypes.node,
-    displayMedia: PropTypes.string,
-    expandSpoilers: PropTypes.bool,
+    cacheWidth: PropTypes.func,
+    backgroundColor: PropTypes.string,
+    foregroundColor: PropTypes.string,
+    accentColor: PropTypes.string,
+    currentTime: PropTypes.number,
+    autoPlay: PropTypes.bool,
+    volume: PropTypes.number,
+    muted: PropTypes.bool,
+    deployPictureInPicture: PropTypes.func,
   };
 
   state = {
+    width: this.props.width,
     currentTime: 0,
-    duration: 0,
-    volume: 0.5,
+    buffer: 0,
+    duration: null,
     paused: true,
-    dragging: false,
     muted: false,
-    revealed: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
+    volume: 0.5,
+    dragging: false,
   };
 
-  // hard coded in components.scss
-  // any way to get ::before values programatically?
-  volWidth = 50;
-  volOffset = 85;
-  volHandleOffset = v => {
-    const offset = v * this.volWidth + this.volOffset;
-    return (offset > 125) ? 125 : offset;
+  constructor(props) {
+    super(props);
+    this.visualizer = new Visualizer(TICK_SIZE);
   }
 
   setPlayerRef = c => {
     this.player = c;
 
-    if (c) {
-      if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth);
-      this.setState({
-        containerWidth: c.offsetWidth,
-      });
+    if (this.player) {
+      this._setDimensions();
     }
   }
 
-  setAudioRef = c => {
-    this.audio = c;
+  _pack() {
+    return {
+      src: this.props.src,
+      volume: this.audio.volume,
+      muted: this.audio.muted,
+      currentTime: this.audio.currentTime,
+      poster: this.props.poster,
+      backgroundColor: this.props.backgroundColor,
+      foregroundColor: this.props.foregroundColor,
+      accentColor: this.props.accentColor,
+    };
+  }
 
-    if (this.audio) {
-      this.setState({ volume: this.audio.volume, muted: this.audio.muted });
+  _setDimensions() {
+    const width  = this.player.offsetWidth;
+    const height = this.props.fullscreen ? this.player.offsetHeight : (width / (16/9));
+
+    if (this.props.cacheWidth) {
+      this.props.cacheWidth(width);
     }
+
+    this.setState({ width, height });
   }
 
   setSeekRef = c => {
@@ -152,20 +100,92 @@ class Audio extends React.PureComponent {
     this.volume = c;
   }
 
-  handleClickRoot = e => e.stopPropagation();
+  setAudioRef = c => {
+    this.audio = c;
+
+    if (this.audio) {
+      this.setState({ volume: this.audio.volume, muted: this.audio.muted });
+    }
+  }
+
+  setCanvasRef = c => {
+    this.canvas = c;
+
+    this.visualizer.setCanvas(c);
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('resize', this.handleResize, { passive: true });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.src !== this.props.src || this.state.width !== prevState.width || this.state.height !== prevState.height || prevProps.accentColor !== this.props.accentColor) {
+      this._clear();
+      this._draw();
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('resize', this.handleResize);
+
+    if (!this.state.paused && this.audio && this.props.deployPictureInPicture) {
+      this.props.deployPictureInPicture('audio', this._pack());
+    }
+  }
+
+  togglePlay = () => {
+    if (!this.audioContext) {
+      this._initAudioContext();
+    }
+
+    if (this.state.paused) {
+      this.setState({ paused: false }, () => this.audio.play());
+    } else {
+      this.setState({ paused: true }, () => this.audio.pause());
+    }
+  }
+
+  handleResize = debounce(() => {
+    if (this.player) {
+      this._setDimensions();
+    }
+  }, 250, {
+    trailing: true,
+  });
 
   handlePlay = () => {
     this.setState({ paused: false });
+
+    if (this.audioContext && this.audioContext.state === 'suspended') {
+      this.audioContext.resume();
+    }
+
+    this._renderCanvas();
   }
 
   handlePause = () => {
     this.setState({ paused: true });
+
+    if (this.audioContext) {
+      this.audioContext.suspend();
+    }
   }
 
-  handleTimeUpdate = () => {
-    this.setState({
-      currentTime: Math.floor(this.audio.currentTime),
-      duration: Math.floor(this.audio.duration),
+  handleProgress = () => {
+    const lastTimeRange = this.audio.buffered.length - 1;
+
+    if (lastTimeRange > -1) {
+      this.setState({ buffer: Math.ceil(this.audio.buffered.end(lastTimeRange) / this.audio.duration * 100) });
+    }
+  }
+
+  toggleMute = () => {
+    const muted = !this.state.muted;
+
+    this.setState({ muted }, () => {
+      this.audio.muted = muted;
     });
   }
 
@@ -188,22 +208,6 @@ class Audio extends React.PureComponent {
     document.removeEventListener('touchend', this.handleVolumeMouseUp, true);
   }
 
-  handleMouseVolSlide = throttle(e => {
-    const rect = this.volume.getBoundingClientRect();
-    const x = (e.clientX - rect.left) / this.volWidth; //x position within the element.
-
-    if(!isNaN(x)) {
-      var slideamt = x;
-      if(x > 1) {
-        slideamt = 1;
-      } else if(x < 0) {
-        slideamt = 0;
-      }
-      this.audio.volume = slideamt;
-      this.setState({ volume: slideamt });
-    }
-  }, 60);
-
   handleMouseDown = e => {
     document.addEventListener('mousemove', this.handleMouseMove, true);
     document.addEventListener('mouseup', this.handleMouseUp, true);
@@ -230,146 +234,295 @@ class Audio extends React.PureComponent {
 
   handleMouseMove = throttle(e => {
     const { x } = getPointerPosition(this.seek, e);
-    const currentTime = Math.floor(this.audio.duration * x);
+    const currentTime = this.audio.duration * x;
 
     if (!isNaN(currentTime)) {
-      this.audio.currentTime = currentTime;
-      this.setState({ currentTime });
+      this.setState({ currentTime }, () => {
+        this.audio.currentTime = currentTime;
+      });
     }
-  }, 60);
+  }, 15);
 
-  togglePlay = () => {
-    if (this.state.paused) {
-      this.audio.play();
-    } else {
+  handleTimeUpdate = () => {
+    this.setState({
+      currentTime: this.audio.currentTime,
+      duration: this.audio.duration,
+    });
+  }
+
+  handleMouseVolSlide = throttle(e => {
+    const { x } = getPointerPosition(this.volume, e);
+
+    if(!isNaN(x)) {
+      this.setState({ volume: x }, () => {
+        this.audio.volume = x;
+      });
+    }
+  }, 15);
+
+  handleScroll = throttle(() => {
+    if (!this.canvas || !this.audio) {
+      return;
+    }
+
+    const { top, height } = this.canvas.getBoundingClientRect();
+    const inView = (top <= (window.innerHeight || document.documentElement.clientHeight)) && (top + height >= 0);
+
+    if (!this.state.paused && !inView) {
       this.audio.pause();
+
+      if (this.props.deployPictureInPicture) {
+        this.props.deployPictureInPicture('audio', this._pack());
+      }
+
+      this.setState({ paused: true });
     }
+  }, 150, { trailing: true });
+
+  handleMouseEnter = () => {
+    this.setState({ hovered: true });
   }
 
-  toggleMute = () => {
-    this.audio.muted = !this.audio.muted;
-    this.setState({ muted: this.audio.muted });
-  }
-
-  toggleWarning = () => {
-    this.setState({ revealed: !this.state.revealed });
+  handleMouseLeave = () => {
+    this.setState({ hovered: false });
   }
 
   handleLoadedData = () => {
-    if (this.props.startTime) {
-      this.audio.currentTime = this.props.startTime;
-      this.audio.play();
+    const { autoPlay, currentTime, volume, muted } = this.props;
+
+    this.setState({ duration: this.audio.duration });
+
+    if (currentTime) {
+      this.audio.currentTime = currentTime;
+    }
+
+    if (volume !== undefined) {
+      this.audio.volume = volume;
+    }
+
+    if (muted !== undefined) {
+      this.audio.muted = muted;
+    }
+
+    if (autoPlay) {
+      this.togglePlay();
     }
   }
 
-  handleProgress = () => {
-    if (this.audio.buffered.length > 0) {
-      this.setState({ buffer: this.audio.buffered.end(0) / this.audio.duration * 100 });
+  _initAudioContext() {
+    const AudioContext = window.AudioContext || window.webkitAudioContext;
+    const context      = new AudioContext();
+    const source       = context.createMediaElementSource(this.audio);
+
+    this.visualizer.setAudioContext(context, source);
+    source.connect(context.destination);
+
+    this.audioContext = context;
+  }
+
+  handleDownload = () => {
+    fetch(this.props.src).then(res => res.blob()).then(blob => {
+      const element   = document.createElement('a');
+      const objectURL = URL.createObjectURL(blob);
+
+      element.setAttribute('href', objectURL);
+      element.setAttribute('download', fileNameFromURL(this.props.src));
+
+      document.body.appendChild(element);
+      element.click();
+      document.body.removeChild(element);
+
+      URL.revokeObjectURL(objectURL);
+    }).catch(err => {
+      console.error(err);
+    });
+  }
+
+  _renderCanvas() {
+    requestAnimationFrame(() => {
+      if (!this.audio) return;
+
+      this.handleTimeUpdate();
+      this._clear();
+      this._draw();
+
+      if (!this.state.paused) {
+        this._renderCanvas();
+      }
+    });
+  }
+
+  _clear() {
+    this.visualizer.clear(this.state.width, this.state.height);
+  }
+
+  _draw() {
+    this.visualizer.draw(this._getCX(), this._getCY(), this._getAccentColor(), this._getRadius(), this._getScaleCoefficient());
+  }
+
+  _getRadius() {
+    return parseInt(((this.state.height || this.props.height) - (PADDING * this._getScaleCoefficient()) * 2) / 2);
+  }
+
+  _getScaleCoefficient() {
+    return (this.state.height || this.props.height) / 982;
+  }
+
+  _getCX() {
+    return Math.floor(this.state.width / 2) || null;
+  }
+
+  _getCY() {
+    return Math.floor(this._getRadius() + (PADDING * this._getScaleCoefficient())) || null;
+  }
+
+  _getAccentColor() {
+    return this.props.accentColor || '#ffffff';
+  }
+
+  _getBackgroundColor() {
+    return this.props.backgroundColor || '#000000';
+  }
+
+  _getForegroundColor() {
+    return this.props.foregroundColor || '#ffffff';
+  }
+
+  seekBy(time) {
+    const currentTime = this.audio.currentTime + time;
+
+    if (!isNaN(currentTime)) {
+      this.setState({ currentTime }, () => {
+        this.audio.currentTime = currentTime;
+      });
     }
   }
 
-  handleVolumeChange = () => {
-    this.setState({ volume: this.audio.volume, muted: this.audio.muted });
+  handleAudioKeyDown = e => {
+    // On the audio element or the seek bar, we can safely use the space bar
+    // for playback control because there are no buttons to press
+
+    if (e.key === ' ') {
+      e.preventDefault();
+      e.stopPropagation();
+      this.togglePlay();
+    }
   }
 
-  getPreload = () => {
-    const { startTime, detailed } = this.props;
-    const { dragging } = this.state;
-
-    if (startTime || dragging) {
-      return 'auto';
-    } else if (detailed) {
-      return 'metadata';
-    } else {
-      return 'none';
+  handleKeyDown = e => {
+    switch(e.key) {
+    case 'k':
+      e.preventDefault();
+      e.stopPropagation();
+      this.togglePlay();
+      break;
+    case 'm':
+      e.preventDefault();
+      e.stopPropagation();
+      this.toggleMute();
+      break;
+    case 'j':
+      e.preventDefault();
+      e.stopPropagation();
+      this.seekBy(-10);
+      break;
+    case 'l':
+      e.preventDefault();
+      e.stopPropagation();
+      this.seekBy(10);
+      break;
     }
   }
 
   render() {
-    const { src, inline, intl, alt, detailed, sensitive, link } = this.props;
-    const { currentTime, duration, volume, buffer, dragging, paused, muted, revealed } = this.state;
-    const progress = (currentTime / duration) * 100;
-
-    const volumeWidth = (muted) ? 0 : volume * this.volWidth;
-    const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume);
-    const playerStyle = {};
-
-    let warning;
-
-    if (sensitive) {
-      warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
-    } else {
-      warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
-    }
+    const { src, intl, alt, editable } = this.props;
+    const { paused, muted, volume, currentTime, buffer, dragging } = this.state;
+    const duration = this.state.duration || this.props.duration;
+    const progress = Math.min((currentTime / duration) * 100, 100);
 
     return (
-      <div
-        role='menuitem'
-        className={classNames('audio-player', { detailed: detailed, inline: inline, warning_visible: !revealed })}
-        style={playerStyle}
-        ref={this.setPlayerRef}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        onClick={this.handleClickRoot}
-        tabIndex={0}
-      >
-
+      <div className={classNames('audio-player', { editable })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), width: '100%', height: this.props.fullscreen ? '100%' : (this.state.height || this.props.height) }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex='0' onKeyDown={this.handleKeyDown}>
         <audio
-          ref={this.setAudioRef}
           src={src}
-          // preload={this.getPreload()}
-          role='button'
-          tabIndex='0'
-          aria-label={alt}
-          title={alt}
-          volume={volume}
-          onClick={this.togglePlay}
+          ref={this.setAudioRef}
+          preload='auto'
           onPlay={this.handlePlay}
           onPause={this.handlePause}
-          onTimeUpdate={this.handleTimeUpdate}
-          onLoadedData={this.handleLoadedData}
           onProgress={this.handleProgress}
-          onVolumeChange={this.handleVolumeChange}
+          onLoadedData={this.handleLoadedData}
+          crossOrigin='anonymous'
         />
 
-        <div className={classNames('audio-player__spoiler-warning', { 'spoiler-button--hidden': revealed })}>
-          <span className='audio-player__spoiler-warning__label'><Icon id='warning' fixedWidth /> {warning}</span>
-          <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleWarning}><Icon id='times' fixedWidth /></button>
+        <canvas
+          role='button'
+          tabIndex='0'
+          className='audio-player__canvas'
+          width={this.state.width}
+          height={this.state.height}
+          style={{ width: '100%', position: 'absolute', top: 0, left: 0 }}
+          ref={this.setCanvasRef}
+          onClick={this.togglePlay}
+          onKeyDown={this.handleAudioKeyDown}
+          title={alt}
+          aria-label={alt}
+        />
+
+        <img
+          src={this.props.poster}
+          alt=''
+          width={(this._getRadius() - TICK_SIZE) * 2 || null}
+          height={(this._getRadius() - TICK_SIZE) * 2 || null}
+          style={{ position: 'absolute', left: this._getCX(), top: this._getCY(), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
+        />
+
+        <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
+          <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
+          <div className='video-player__seek__progress' style={{ width: `${progress}%`, backgroundColor: this._getAccentColor() }} />
+
+          <span
+            className={classNames('video-player__seek__handle', { active: dragging })}
+            tabIndex='0'
+            style={{ left: `${progress}%`, backgroundColor: this._getAccentColor() }}
+            onKeyDown={this.handleAudioKeyDown}
+          />
         </div>
 
-        <div className={classNames('audio-player__controls')}>
-          <div className='audio-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
-            <div className='audio-player__seek__buffer' style={{ width: `${buffer}%` }} />
-            <div className='audio-player__seek__progress' style={{ width: `${progress}%` }} />
+        <div className='video-player__controls active'>
+          <div className='video-player__buttons-bar'>
+            <div className='video-player__buttons left'>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
 
-            <span
-              className={classNames('audio-player__seek__handle', { active: dragging })}
-              tabIndex='0'
-              style={{ left: `${progress}%` }}
-            />
-          </div>
+              <div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
+                <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
 
-          <div className='audio-player__buttons-bar'>
-            <div className='audio-player__buttons left'>
-              <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
-              <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
-
-              <div className='audio-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
-                <div className='audio-player__volume__current' style={{ width: `${volumeWidth}px` }} />
                 <span
-                  className={classNames('audio-player__volume__handle')}
+                  className='video-player__volume__handle'
                   tabIndex='0'
-                  style={{ left: `${volumeHandleLoc}px` }}
+                  style={{ left: `${volume * 100}%`, backgroundColor: this._getAccentColor() }}
                 />
               </div>
 
-              <span>
-                <span className='audio-player__time-current'>{formatTime(currentTime)}</span>
-                <span className='audio-player__time-sep'>/</span>
-                <span className='audio-player__time-total'>{formatTime(duration)}</span>
+              <span className='video-player__time'>
+                <span className='video-player__time-current'>{formatTime(Math.floor(currentTime))}</span>
+                {duration && (<>
+                  <span className='video-player__time-sep'>/</span>
+                  <span className='video-player__time-total'>{formatTime(Math.floor(duration))}</span>
+                </>)}
               </span>
+            </div>
 
-              {link && <span className='audio-player__link'>{link}</span>}
+            <div className='video-player__buttons right'>
+              <a
+                title={intl.formatMessage(messages.download)}
+                aria-label={intl.formatMessage(messages.download)}
+                className='video-player__download__icon player-button'
+                href={this.props.src}
+                download
+                target='_blank'
+              >
+                <Icon id={'download'} fixedWidth />
+              </a>
             </div>
           </div>
         </div>
diff --git a/app/soapbox/features/audio/visualizer.js b/app/soapbox/features/audio/visualizer.js
new file mode 100644
index 000000000..5aac5755a
--- /dev/null
+++ b/app/soapbox/features/audio/visualizer.js
@@ -0,0 +1,136 @@
+/*
+Copyright (c) 2020 by Alex Permyakov (https://codepen.io/alexdevp/pen/RNELPV)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+const hex2rgba = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+export default class Visualizer {
+
+  constructor(tickSize) {
+    this.tickSize = tickSize;
+  }
+
+  setCanvas(canvas) {
+    this.canvas = canvas;
+    if (canvas) {
+      this.context = canvas.getContext('2d');
+    }
+  }
+
+  setAudioContext(context, source) {
+    const analyser = context.createAnalyser();
+
+    analyser.smoothingTimeConstant = 0.6;
+    analyser.fftSize = 2048;
+
+    source.connect(analyser);
+
+    this.analyser = analyser;
+  }
+
+  getTickPoints(count) {
+    const coords = [];
+
+    for(let i = 0; i < count; i++) {
+      const rad = Math.PI * 2 * i / count;
+      coords.push({ x: Math.cos(rad), y: -Math.sin(rad) });
+    }
+
+    return coords;
+  }
+
+  drawTick(cx, cy, mainColor, x1, y1, x2, y2) {
+    const dx1 = Math.ceil(cx + x1);
+    const dy1 = Math.ceil(cy + y1);
+    const dx2 = Math.ceil(cx + x2);
+    const dy2 = Math.ceil(cy + y2);
+
+    const gradient = this.context.createLinearGradient(dx1, dy1, dx2, dy2);
+
+    const lastColor = hex2rgba(mainColor, 0);
+
+    gradient.addColorStop(0, mainColor);
+    gradient.addColorStop(0.6, mainColor);
+    gradient.addColorStop(1, lastColor);
+
+    this.context.beginPath();
+    this.context.strokeStyle = gradient;
+    this.context.lineWidth = 2;
+    this.context.moveTo(dx1, dy1);
+    this.context.lineTo(dx2, dy2);
+    this.context.stroke();
+  }
+
+  getTicks(count, size, radius, scaleCoefficient) {
+    const ticks = this.getTickPoints(count);
+    const lesser = 200;
+    const m = [];
+    const bufferLength = this.analyser ? this.analyser.frequencyBinCount : 0;
+    const frequencyData = new Uint8Array(bufferLength);
+    const allScales = [];
+
+    if (this.analyser) {
+      this.analyser.getByteFrequencyData(frequencyData);
+    }
+
+    ticks.forEach((tick, i) => {
+      const coef = 1 - i / (ticks.length * 2.5);
+
+      let delta = ((frequencyData[i] || 0) - lesser * coef) * scaleCoefficient;
+
+      if (delta < 0) {
+        delta = 0;
+      }
+
+      const k = radius / (radius - (size + delta));
+
+      const x1 = tick.x * (radius - size);
+      const y1 = tick.y * (radius - size);
+      const x2 = x1 * k;
+      const y2 = y1 * k;
+
+      m.push({ x1, y1, x2, y2 });
+
+      if (i < 20) {
+        let scale = delta / (200 * scaleCoefficient);
+        scale = scale < 1 ? 1 : scale;
+        allScales.push(scale);
+      }
+    });
+
+    const scale = allScales.reduce((pv, cv) => pv + cv, 0) / allScales.length;
+
+    return m.map(({ x1, y1, x2, y2 }) => ({
+      x1: x1,
+      y1: y1,
+      x2: x2 * scale,
+      y2: y2 * scale,
+    }));
+  }
+
+  clear(width, height) {
+    this.context.clearRect(0, 0, width, height);
+  }
+
+  draw(cx, cy, color, radius, coefficient) {
+    this.context.save();
+
+    const ticks = this.getTicks(parseInt(360 * coefficient), this.tickSize, radius, coefficient);
+
+    ticks.forEach(tick => {
+      this.drawTick(cx, cy, color, tick.x1, tick.y1, tick.x2, tick.y2);
+    });
+
+    this.context.restore();
+  }
+
+}
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index 9ae762586..e8bdd58de 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -119,6 +119,18 @@ class MediaModal extends ImmutablePureComponent {
     }
   }
 
+  handleCloserClick = ({ target }) => {
+    const whitelist = ['zoomable-image'];
+    const activeSlide = document.querySelector('.media-modal .react-swipeable-view-container > div[aria-hidden="false"]');
+
+    const isClickOutside = target === activeSlide || !activeSlide.contains(target);
+    const isWhitelisted = whitelist.some(w => target.classList.contains(w));
+
+    if (isClickOutside || isWhitelisted) {
+      this.props.onClose();
+    }
+  }
+
   render() {
     const { media, status, account, intl, onClose } = this.props;
     const { navigationHidden } = this.state;
@@ -236,7 +248,7 @@ class MediaModal extends ImmutablePureComponent {
         <div
           className='media-modal__closer'
           role='presentation'
-          onClick={onClose}
+          onClick={this.handleCloserClick}
         >
           <ReactSwipeableViews
             style={swipeableViewsStyle}
diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index ad4a5ba3d..04ce94133 100644
--- a/app/soapbox/features/video/index.js
+++ b/app/soapbox/features/video/index.js
@@ -23,7 +23,7 @@ const messages = defineMessages({
   exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
 });
 
-const formatTime = secondsNum => {
+export const formatTime = secondsNum => {
   let hours   = Math.floor(secondsNum / 3600);
   let minutes = Math.floor((secondsNum - (hours * 3600)) / 60);
   let seconds = secondsNum - (hours * 3600) - (minutes * 60);
@@ -399,9 +399,6 @@ class Video extends React.PureComponent {
     const { src, inline, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio } = this.props;
     const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
     const progress = (currentTime / duration) * 100;
-
-    const volumeWidth = (muted) ? 0 : volume * this.volWidth;
-    const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume);
     const playerStyle = {};
 
     let { width, height } = this.props;
@@ -483,15 +480,15 @@ class Video extends React.PureComponent {
 
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
-              <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
+              <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
+              <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
 
-              <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
-                <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} />
+              <div className={classNames('video-player__volume', { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
+                <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
                 <span
                   className={classNames('video-player__volume__handle')}
                   tabIndex='0'
-                  style={{ left: `${volumeHandleLoc}px` }}
+                  style={{ left: `${volume * 100}%` }}
                 />
               </div>
 
@@ -507,10 +504,10 @@ class Video extends React.PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
-              {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
-              {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
-              <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button>
+              {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
+              {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
+              {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
+              <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button>
             </div>
           </div>
         </div>
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
index 731485508..17f72d3aa 100644
--- a/app/styles/components/audio-player.scss
+++ b/app/styles/components/audio-player.scss
@@ -65,312 +65,60 @@
 
 .audio-player {
   overflow: hidden;
+  box-sizing: border-box;
   position: relative;
   background: $base-shadow-color;
-  max-width: 100%;
   border-radius: 4px;
-  height: 57px;
+  padding-bottom: 44px;
+  direction: ltr;
 
-  &.warning_visible {
-    height: 92px;
-  }
-
-  &:focus {
-    outline: 0;
-  }
-
-  audio {
-    max-width: 100vw;
-    max-height: 80vh;
-    min-height: 120px;
-    object-fit: contain;
-    z-index: 1;
-  }
-
-  &.fullscreen {
-    width: 100% !important;
-    height: 100% !important;
-    margin: 0;
-
-    audio {
-      max-width: 100% !important;
-      max-height: 100% !important;
-      width: 100% !important;
-      height: 100% !important;
-    }
-  }
-
-  &.inline {
-    audio {
-      object-fit: contain;
-      position: relative;
-    }
-  }
-
-  &__controls {
-    position: absolute;
-    z-index: 2;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-sizing: border-box;
-    background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
-    padding: 0 15px;
-    opacity: 1;
-    transition: opacity 0.1s ease;
-  }
-
-  &.inactive {
-    min-height: 57px;
-
-    audio,
-    .audio-player__controls {
-      visibility: hidden;
-    }
-  }
-
-  &__spoiler {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
+  &.editable {
+    border-radius: 0;
     height: 100%;
-    z-index: 4;
-    border: 0;
-    background: var(--background-color);
-    color: var(--primary-text-color--faint);
-    transition: none;
-    pointer-events: auto;
+  }
+
+  .video-player__volume::before,
+  .video-player__seek::before {
+    background: currentColor;
+    opacity: 0.15;
+  }
+
+  .video-player__seek__buffer {
+    background: currentColor;
+    opacity: 0.2;
+  }
+
+  .video-player__buttons button {
+    color: currentColor;
+    opacity: 0.75;
 
-    &:hover,
     &:active,
+    &:hover,
     &:focus {
-      color: var(--primary-text-color);
-    }
-
-    &__title {
-      display: block;
-      font-size: 14px;
-    }
-
-    &__subtitle {
-      display: block;
-      font-size: 11px;
-      font-weight: 500;
-    }
-  }
-
-  &__buttons-bar {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 10px;
-  }
-
-  &__spoiler-warning {
-    font-size: 16px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    background: hsl(var(--brand-color_h), var(--brand-color_s), 20%);
-    padding: 5px;
-
-    &__label {
-      color: #fff;
-    }
-
-    button {
-      background: transparent;
-      font-size: 16px;
-      border: 0;
-      color: rgba(#fff, 0.75);
-      position: absolute;
-      right: 0;
-      padding-right: 5px;
-
-      i {
-        margin-right: 0;
-      }
-
-      &:active,
-      &:hover,
-      &:focus {
-        color: #fff;
-      }
-    }
-  }
-
-  &__buttons {
-    font-size: 16px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.left {
-      button {
-        padding-left: 0;
-      }
-    }
-
-    button {
-      background: transparent;
-      padding: 2px 10px;
-      font-size: 16px;
-      border: 0;
-      color: rgba(#fff, 0.75);
-
-      &:active,
-      &:hover,
-      &:focus {
-        color: #fff;
-      }
-    }
-  }
-
-  &__time-sep,
-  &__time-total,
-  &__time-current {
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  &__time-current {
-    color: #fff;
-    margin-left: 60px;
-  }
-
-  &__time-sep {
-    display: inline-block;
-    margin: 0 6px;
-  }
-
-  &__time-sep,
-  &__time-total {
-    color: #fff;
-  }
-
-  &__volume {
-    cursor: pointer;
-    height: 24px;
-    display: inline;
-
-    &::before {
-      content: "";
-      width: 50px;
-      background: rgba(#fff, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      left: 85px;
-      bottom: 20px;
-    }
-
-    &__current {
-      display: block;
-      position: absolute;
-      height: 4px;
-      border-radius: 4px;
-      left: 85px;
-      bottom: 20px;
-      background: var(--brand-color);
-    }
-
-    &__handle {
-      position: absolute;
-      z-index: 3;
-      border-radius: 50%;
-      width: 12px;
-      height: 12px;
-      bottom: 16px;
-      left: 70px;
-      transition: opacity 0.1s ease;
-      background: var(--brand-color);
-      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
-    }
-  }
-
-  &__link {
-    padding: 2px 10px;
-
-    a {
-      text-decoration: none;
-      font-size: 14px;
-      font-weight: 500;
-      color: #fff;
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &__seek {
-    cursor: pointer;
-    height: 24px;
-    position: relative;
-
-    &::before {
-      content: "";
-      width: 100%;
-      background: rgba(#fff, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      top: 10px;
-    }
-
-    &__progress,
-    &__buffer {
-      display: block;
-      position: absolute;
-      height: 4px;
-      border-radius: 4px;
-      top: 10px;
-      background: var(--brand-color);
-    }
-
-    &__buffer {
-      background: rgba(#fff, 0.2);
-    }
-
-    &__handle {
-      position: absolute;
-      z-index: 3;
+      color: currentColor;
       opacity: 1;
-      border-radius: 50%;
-      width: 12px;
-      height: 12px;
-      top: 6px;
-      margin-left: -6px;
-      transition: opacity 0.1s ease;
-      background: var(--brand-color);
-      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
-    }
-
-    &:hover {
-      .audio-player__seek__handle {
-        opacity: 1;
-      }
     }
   }
 
-  &.detailed {
-    width: 100vmin;
-    height: 80px;
+  .video-player__time-sep,
+  .video-player__time-total,
+  .video-player__time-current {
+    color: currentColor;
+  }
 
-    @media screen and (max-width: 790px) { width: 80vmin; }
+  .video-player__seek::before,
+  .video-player__seek__buffer,
+  .video-player__seek__progress {
+    top: 0;
+  }
 
-    .audio-player__buttons {
-      button {
-        padding-top: 10px;
-        padding-bottom: 10px;
-      }
-    }
+  .video-player__seek__handle {
+    top: -4px;
+  }
+
+  .video-player__controls {
+    padding-top: 10px;
+    background: transparent;
   }
 }
 
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 544febb70..de64331d5 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -82,6 +82,12 @@
     transition: opacity 0.1s ease;
     line-height: 18px;
   }
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
 .status__wrapper,
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index a4c82d516..488c0175c 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -45,6 +45,12 @@
   position: relative;
 }
 
+.video-modal {
+  .video-player video {
+    height: auto;
+  }
+}
+
 .media-modal {
   width: 100%;
   height: 100%;
@@ -57,6 +63,11 @@
     justify-content: center;
   }
 
+  .audio-player {
+    max-width: 800px;
+    max-height: 600px;
+  }
+
   .extended-video-player {
     width: 100%;
     height: 100%;
diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index 8e997c5e1..3c02abdf1 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -83,16 +83,23 @@
   background: $base-shadow-color;
   max-width: 100%;
   border-radius: 4px;
+  box-sizing: border-box;
+  direction: ltr;
+  color: white;
+
+  &.editable {
+    border-radius: 0;
+    height: 100% !important;
+  }
 
   &:focus {
     outline: 0;
   }
 
   video {
+    display: block;
     max-width: 100vw;
     max-height: 80vh;
-    min-height: 120px;
-    object-fit: contain;
     z-index: 1;
   }
 
@@ -106,6 +113,7 @@
       max-height: 100% !important;
       width: 100% !important;
       height: 100% !important;
+      outline: 0;
     }
   }
 
@@ -182,30 +190,30 @@
   &__buttons-bar {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 10px;
+    padding-bottom: 8px;
+    margin: 0 -5px;
+
+    .video-player__download__icon {
+      color: inherit;
+    }
   }
 
   &__buttons {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 30px;
+    align-items: center;
     font-size: 16px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
-    &.left {
-      button {
-        padding-left: 0;
-      }
-    }
-
-    &.right {
-      button {
-        padding-right: 0;
-      }
-    }
-
-    button {
+    .player-button {
+      display: inline-block;
+      outline: 0;
+      flex: 0 0 auto;
       background: transparent;
-      padding: 2px 10px;
+      padding: 5px;
       font-size: 16px;
       border: 0;
       color: rgba(#fff, 0.75);
@@ -218,6 +226,14 @@
     }
   }
 
+  &__time {
+    display: inline;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 5px;
+  }
+
   &__time-sep,
   &__time-total,
   &__time-current {
@@ -227,7 +243,6 @@
 
   &__time-current {
     color: #fff;
-    margin-left: 60px;
   }
 
   &__time-sep {
@@ -241,9 +256,22 @@
   }
 
   &__volume {
+    flex: 0 0 auto;
+    display: inline-flex;
     cursor: pointer;
     height: 24px;
-    display: inline;
+    position: relative;
+    overflow: hidden;
+
+    .no-reduce-motion & {
+      transition: all 100ms linear;
+    }
+
+    &.active {
+      overflow: visible;
+      width: 50px;
+      margin-right: 16px;
+    }
 
     &::before {
       content: "";
@@ -253,8 +281,9 @@
       display: block;
       position: absolute;
       height: 4px;
-      left: 70px;
-      bottom: 20px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
     }
 
     &__current {
@@ -262,8 +291,9 @@
       position: absolute;
       height: 4px;
       border-radius: 4px;
-      left: 70px;
-      bottom: 20px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
       background: var(--brand-color);
     }
 
@@ -273,12 +303,21 @@
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      bottom: 16px;
-      left: 70px;
-      transition: opacity 0.1s ease;
+      top: 50%;
+      left: 0;
+      margin-left: -6px;
+      transform: translate(0, -50%);
       background: var(--brand-color);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
+      opacity: 0;
+
+      .no-reduce-motion & {
+        transition: opacity 100ms linear;
+      }
+    }
+
+    &.active &__handle {
+      opacity: 1;
     }
   }
 
@@ -312,7 +351,7 @@
       display: block;
       position: absolute;
       height: 4px;
-      top: 10px;
+      top: 14px;
     }
 
     &__progress,
@@ -321,7 +360,7 @@
       position: absolute;
       height: 4px;
       border-radius: 4px;
-      top: 10px;
+      top: 14px;
       background: var(--brand-color);
     }
 
@@ -336,12 +375,14 @@
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      top: 6px;
+      top: 10px;
       margin-left: -6px;
-      transition: opacity 0.1s ease;
       background: var(--brand-color);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
+
+      .no-reduce-motion & {
+        transition: opacity 0.1s ease;
+      }
 
       &.active {
         opacity: 1;
@@ -358,7 +399,7 @@
   &.detailed,
   &.fullscreen {
     .video-player__buttons {
-      button {
+      .player-button {
         padding-top: 10px;
         padding-bottom: 10px;
       }