Background plugin

The background plugin provides an easy way to show a video as background of the page.

Loading the assets

<!-- background plugin stylesheet -->
<link rel="stylesheet" href="//releases.flowplayer.org/background/flowplayer.background.css">
 
<!-- ... -->
 
<!-- load the Flowplayer script -->
<script src="//releases.flowplayer.org/7.2.1/flowplayer.min.js"></script>
<!-- load the latest version of the background plugin -->
<script src="//releases.flowplayer.org/background/flowplayer.background.min.js"></script>

HTML

Setup

<div id="fp-background"></div>
 
<script>
flowplayer("#fp-background", {
ratio: 9/16,
 
// this is a background video
background: {
// make mask lighter to reduce distraction
mask: "rgba(255, 255, 255, 0.9)"
},
muted: true,
 
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//cdn.flowplayer.org/202777/153414.m3u8" },
{ type: "video/mp4",
src: "//cdn.flowplayer.org/202777/153414.mp4" }
]
}
});
</script>

HTML