Flowplayer · Fullscreen button in controlbar

<head/>

For smoother HLS playback in modern browsers we load the hlsjs plugin.

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

HTML

<style>

/* make room for fullscreen button on the controlbar's right side
no-mute no-volume modifier class combination must be adapted for devices
which do no support volume controls (e.g. iOS) */
.flowplayer .fp-timeline {
margin-right: 270px; /* originally: 225px */
}
.no-volume.no-mute.flowplayer .fp-timeline {
margin-right: 165px; /* originally: 120px */
}
.flowplayer .fp-remaining, .flowplayer .fp-duration {
right: 225px; /* orginally: 180px */
}
.no-mute.no-volume.flowplayer .fp-remaining, .no-mute.no-volume.flowplayer .fp-duration {
right: 120px; /* originally: 75px */
}
.flowplayer .fp-brand {
right: 160px; /* originally 115px */
}
.no-volume.no-mute.flowplayer .fp-brand {
right: 55px; /* originally 10px */
}
 
.flowplayer .fp-volume {
right: 55px; /* originally 10px; */
}
.flowplayer .fp-embed {
right: 10px; /* originally 50px */
}
.flowplayer .fp-embed-code {
right: 47px; /* originally 67px */
}
 
/* position new fullscreen button */
.flowplayer .fp-fullscreen {
top: 0;
}

CSS

<script>

Adding the fullscreen button to the controlbar after removing it from the top level UI avoids layering it on top of the controlbar.

flowplayer(function (api, root) {
// append fullscreen button to controlbar
var fsbutton = root.querySelector(".fp-fullscreen");
 
root.querySelector(".fp-controls").appendChild(fsbutton);
});
 

// ensure that DOM is ready
window.onload = function () {
 
flowplayer("#player", {
ratio: 5/12,
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/bauhaus.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/bauhaus.mp4" }
]
}
});
 
};

JavaScript

<body/>

<div id="player" class="fixed-controls"></div>

HTML