block1.

const styles = StyleSheet.create({
	container: {
		position: 'relative',
		overflow: 'hidden',
		minHeight: 200
	},
	topVideoContainer: {
		position: 'absolute',
		top: 0,
		left: 0,
		width: '100%',
		height: '100%'
	}
});

export default class VidCompare extends Component {
	
	static propTypes = {
		video1webm: PropTypes.string,
		video2webm: PropTypes.string,
		video1mp4: PropTypes.string,
		video2mp4: PropTypes.string
	};

	static defaultProps = {
		video1webm: 'video-1.webm',
		video2webm: 'video-2.webm',
		video1mp4: 'video-1.mp4',
		video2mp4: 'video-2.mp4'
	};

	render() {

		let { video1webm, video2webm, video1mp4, video2mp4 } = this.props;
		
		<div 
			id="vid-compare-container"
			className={css(styles.container)}
			ref={ ref => { this.container = ref } >
			
			<video width="100%" height="100%" autoPlay loop>
				<source src={video1webm} type="video/webm"/>
				<source src={video1mp4} type="video/mp4"/>
			</video>
			
			<div className={css(styles.topVideoContainer)}>
				<video width="100%" height="100%" autoPlay loop>
					<source src={video2webm} type="video/webm"/>
					<source src={video2mp4} type="video/mp4"/>
				</video>
			</div>

		</div>
	}
}

``` 

As you can see, we created a very simple component, that right now just renders 2 `<video/>` tags that will automatically play on load and loop video. These tags will first attempt to render the `.webm` video, and if it can't, it will fallback to the `.mp4`. We have used `absolute` positioning to position one `<video/>` element over the other. You might have noticed that we nested the second video (which is going to be our TOP video) inside of an extra `<div/>` container, the reason for this will become more apparent further down.


## Using the onMouseMove event to determine mouse position

Now at this point, we are not completely sure how we are going to animate this, but one thing for certain is, that we know we will need to get the mouse position, relative to the video that we are moving our mouse over, so that what we get back is a pixel value (from the left side of the video) of the mouse cursor position. To accomplish this we will use the `onMouseMove` event and create a function to handle mouse movement which we will aptly name `_handleMouseMove` (I personally like to designate purely component private functions with an underscore.) 

```
export default class VidCompare extends Component {
	
	_handleMouseMove(e) {
		
		// First we figure out, how far from the left side of the browser is the image
		// this will be the offset that we use in the next step

		let left = this.container.getBoundingClientRect().left;
		
		// We will use the synthetic event that is passed through, to figure out the pageX of the
		// mouse, which is the mouse's X position on the whole page, then we simply subtract
		// the left offset to get the actual position value of the mouse relative to the image.
		
		// Please note, we can also check to see if the synthetic event has any touches on it, 
		// which would indicate a mobile touch device, which we handle accordingly using a conditional 
		// ternary operator. 
		
		this.setState({
			pageX: e.touches ? e.touches[0].pageX - left : e.pageX - left
		});
	}
	
	constructor(props) {
		super(props);
		
		// Bind our mouse move handler in the constructor, for performance reasons
		// https://facebook.github.io/react/docs/handling-events.html
		
		this.handleMouseMove = this._handleMouseMove.bind(this);
	}
	
	// We will plug our mouse handler in to the top most container, on both the onMouseMove
	// and onTouchMove events (for mobile compatibility.)
	render() {

		let { video1webm, video2webm, video1mp4, video2mp4 } = this.props;
		
		<div 
			id="vid-compare-container"
			className={css(styles.container)}
			ref={ ref => { this.container = ref }
			onMouseMove={this.handleMouseMove}
			onTouchMove={this.handleMouseMove}>
			
			....

		</div>
	}
}