Full-screen HTML5 Video Background Blur

by dustinkerstein

HTML

<div id="container">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="https://files.panomoments.com/smpte.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
</div>

CSS

body{ margin:0;}

#container {
		width: 100vw;
		height: 100vh;
		text-align: center;
		overflow: hidden;
}
#videobcg {
		width: inherit;
		height: inherit;
    -o-filter: blur(15px);
    filter: blur(15px);
    object-fit: cover;
		transform: scale(1.06); /* scale up to hide the edge blur */
}