diff --git a/src/components/video-preview/video-preview.scss b/src/components/video-preview/video-preview.scss index f06363e60..21411f786 100644 --- a/src/components/video-preview/video-preview.scss +++ b/src/components/video-preview/video-preview.scss @@ -40,4 +40,12 @@ width: 100%; height: 100%; position: relative; +} + +.iframe-not-loaded { + visibility: hidden; +} + +.iframe-loaded { + visibility: visible; } \ No newline at end of file diff --git a/src/components/video/video.jsx b/src/components/video/video.jsx index d8619302c..67a40b7ac 100644 --- a/src/components/video/video.jsx +++ b/src/components/video/video.jsx @@ -7,12 +7,18 @@ const classNames = require('classnames'); require('./video.scss'); class Video extends React.Component { + constructor (props) { + super(props); + + this.state = { + loaded: false + }; + } componentDidMount () { /** uses code snippets from https://github.com/mrdavidjcole/wistia-player-react/blob/master/src/components/wistia_embed.js **/ - if (!document.getElementById('wistia_script')) { const wistiaScript = document.createElement('script'); wistiaScript.id = 'wistia_script'; @@ -25,18 +31,27 @@ class Video extends React.Component { window._wq = window._wq || []; window._wq.push({ id: this.props.videoId, - onReady: this.props.onLoad + onReady: video => { + video.bind('secondchange', s => { + if (s >= 0) { + this.setState({loaded: true}); + this.props.onLoad(); + } + }); + } }); } render () { + const loadedClass = this.state.loaded ? 'iframe-loaded' : 'iframe-not-loaded'; + return (