Spotlighr Custom Times

Simple React Hooks example. A timer that pauses when you hold the mouse button. Creates and uses a custom Hook.

by petarsubotic

HTML

<div id="app"></div>

CSS

.timer {
  padding: 20px;
  font-size: 40px;
}

React

function EmbedVideo () {
	const playerId = "MTM0NTg3OQ==";
  const videoHost= "https://videos.cdn.spotlightr.com/"
  const queryParams = "s=4&e=10"
  const iframeSrc = videoHost+"watch/"+ playerId + "?"+queryParams	
	React.useEffect(() => {
    const script = document.createElement('script');  
    script.src = videoHost + "assets/spotlightr.js"
    
    document.body.appendChild(script);
    return () => {
    	document.body.removeChild(script);
    }

    }, []);
  
  return (
  <iframe allow="autoplay"  className="video-player-container spotlightr" data-playerid={playerId} allowtransparency="true" style={{maxWidth:'100%'}} name="videoPlayerframe" allowfullscreen="true" src={iframeSrc} watch-type="" url-params={queryParams} frameborder="0" scrolling="no"> </iframe>  
    
    )
}

ReactDOM.render(<EmbedVideo />, document.querySelector("#app"))