Prime Youtube and Vimeo players with a blank video

Fixes #7

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. This projec
 
 ### Unreleased
 
+* Fix [YouTube and Vimeo autoplay bug](https://github.com/CookPete/react-player/issues/7)
 * [Full commit list](https://github.com/CookPete/react-player/compare/v0.2.1...master)
 
 

src/players/Base.js

@@ -9,6 +9,10 @@ export default class Base extends Component {
   static defaultProps = defaultProps
   componentDidMount () {
     this.update()
+    if (!this.props.url && this.prime) {
+      this.priming = true
+      this.prime()
+    }
   }
   componentWillUnmount () {
     this.stop()
@@ -52,7 +56,7 @@ export default class Base extends Component {
   }
   onReady = () => {
     this.setVolume(this.props.volume)
-    if (this.props.playing) {
+    if (this.props.playing || this.priming) {
       this.play()
     }
   }

src/players/Vimeo.js

@@ -7,6 +7,7 @@ import Base from './Base'
 const IFRAME_SRC = 'https://player.vimeo.com/video/'
 const MATCH_URL = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/
 const MATCH_MESSAGE_ORIGIN = /^https?:\/\/player.vimeo.com/
+const BLANK_VIDEO_URL = 'https://vimeo.com/127250231'
 const DEFAULT_IFRAME_PARAMS = {
   api: 1,
   autoplay: 0,
@@ -39,6 +40,9 @@ export default class Vimeo extends Base {
       this.postMessage('play')
     }
   }
+  prime () {
+    this.play(BLANK_VIDEO_URL)
+  }
   pause () {
     this.postMessage('pause')
   }

src/players/YouTube.js

@@ -8,6 +8,7 @@ const SDK_URL = '//www.youtube.com/iframe_api'
 const SDK_GLOBAL = 'YT'
 const MATCH_URL = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
 const PLAYER_ID = 'youtube-player'
+const BLANK_VIDEO_URL = 'https://www.youtube.com/watch?v=GlCmAC4MHek'
 const DEFAULT_PLAYER_VARS = {
   autoplay: 0,
   controls: 0,
@@ -64,6 +65,9 @@ export default class YouTube extends Base {
     if (state.data === YT.PlayerState.BUFFERING) this.props.onBuffer()
     if (state.data === YT.PlayerState.ENDED) this.props.onEnded()
   }
+  prime () {
+    this.play(BLANK_VIDEO_URL)
+  }
   pause () {
     if (!this.player) return
     this.player.pauseVideo()