Simple Video player

markup.html

<div class="video">
	<video poster="video-poster.png" controls>
		<source src="video.mp4" type="video/mp4">
		Your browser does not support the <code>video</code> element.
		<img src="video-poster.png" alt="launch video" />
	</video>
</div>

styling.scss

/**
 * video
 * Relies on Kickoff's $default-transition var
 */
.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: $default-transition;
	}

	&.video-show video {
		opacity: 1;
	}

	&:after {
		content: '';
		position: absolute;
		background-image: url('play.png');
		background-size: cover;
		width: 60px;
		height: 60px;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		transition: $default-transition;
		transform-origin: center;
		cursor: pointer;

		@include respond-min(mid) {
			width: 117px;
			height: 117px;
		}
	}

	&.video-show:after {
		opacity: 0;
	}

	&:hover:after {
		transform: translate3d(-50%, -50%, 0) scale(1.2);
	}
}

video.js

/**
 * video
 * @module video
 * @description plays a video
 * @author Zander Martineau
 * Relies on double-dollar available on the window object
 */

export default function video() {
	$$('.video').forEach(item => {
		if (item === null) {
			return;
		}
		const video = item.querySelector('video');
		item.addEventListener('click', () => {
			item.classList.add('video-show');
			video.play();
		}, false);
	});
}