embed a video, for use as a background or a slide element, or wherever you need a large video.

I found that there was a bug in chrome (which is probably fixed now) that was ignoring the autoplay tag so had to add some js to play the video, this one seems to be working ok with no js to play the video, so must have been some other library on the page that was causing the issue.

note: the video is compressed quite a lot so saves a bit of space

example

code

<style>
video {
  width: 100%    !important;
  height: auto   !important;
}
.video-wrap {
	overflow:hidden;
	height:400px;
}	
</style>

<div class='video-wrap'>
	<video id="desk" loop autoplay>
		<source src="video/blurred-bokeh-video.webm" type="video/webm">
	</video>
</div>

here is the js to grab the video and play it after the doc loads, usually add the set timeout to a doc ready. but this is not used here as i didnt have the issue.

function video_play() {
    video = document.getElementById('desk');
    var isPlaying = video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2;

    if (!isPlaying) {
      video.play();
    }
}
setTimeout(video_play, 1000);