Flowplayer · Float on scroll

This demos shows how to keep a minimized player floating when the container is scrolled out of view.

Video courtesy of Figs In Wigs

<head/>

<style>

/* floating minimized container at bottom right of page */
.flowplayer.is-ready.is-floating {
border-radius: 2px;
bottom: 20px;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.9);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.9);
right: 20px;
position: fixed;
width: 300px;
z-index: 1;
}
/* prepare placeholder for responsiveness */
.fp-placeholder {
position: relative;
width: 100%;
max-height: 100%;
}
 
/* player and info text side by side */
.flowplayer {
background-image: url(//demos.flowplayer.com/media/img/figsinwigs.jpg);
background-color: #f60;
max-width: 70%;
}
div.info {
display: inline-block;
margin-left: 1em;
}

CSS

<script>

The global API function acts like a mini plugin: it accepts float as a player option, and if float is true, it will make the player float on scroll. For convenience it uses the flowplayer.bean and flowplayer.common API tools. A placeholder is added for the container which expands to responsive container dimensions.

flowplayer(function (api, root) {
if (!flowplayer.support.inlineVideo || !api.conf.float) {
return;
}
var bean = flowplayer.bean,
common = flowplayer.common,
isMinimal = common.hasClass(root, "fp-minimal"),
scrolling = false,
placeholder = common.createElement("div", {
"class": "fp-placeholder"
}),
 
scrollCallback = function () {
if (scrolling) {
return;
}
var scrollTop = function () {
var docElem = document.documentElement;
 
return (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0);
},
floatPlayer = scrollTop() >= common.offset(placeholder).top + scrollTop();
 
common.toggleClass(root, "is-floating", floatPlayer);
if (!isMinimal) {
common.toggleClass(root, "fp-minimal", floatPlayer);
}
// make placeholder responsive while player is floating
common.css(common.find("div", placeholder)[0],
"padding-top", floatPlayer ? (api.conf.ratio * 100) + "%" : 0);
scrolling = true;
setTimeout(function () {
scrolling = false;
}, 75);
};
 
// fine tune placeholder styling
[ "display",
"float",
"max-width",
"max-height",
"background-color",
"background-image",
"background-size" ].forEach(function (style) {
common.css(placeholder, style, common.css(root, style));
});
// append a DIV acting like fp-ratio to make the placeholder responsive
common.append(placeholder, common.createElement('div'));
root.parentNode.insertBefore(placeholder, root);
 
api.on("ready", function () {
bean.on(window, "scroll.fp-float", scrollCallback);
}).on("unload", function () {
bean.off(window, "scroll.fp-float");
common.css(common.find("div", placeholder)[0], "padding-top", 0);
common.removeClass(root, "is-floating");
if (!isMinimal) {
common.removeClass(root, "fp-minimal");
}
});
});

JavaScript

<body/>

<div class="flowplayer" data-float="true" data-aspect-ratio="16:9">
<video loop autoplay>
<source type="application/x-mpegurl" src="//edge.flowplayer.org/cilla_black_bean_sauce.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/cilla_black_bean_sauce.mp4">
</video>
</div>
 
<div class="info">
<p>Video courtesy of <a href="https://www.figsinwigs.com/">Figs In Wigs</a></p>
</div>

HTML

Caveat: If you set up several players for floating, use splash setups and avoid autoplay.