Flowplayer · Controls only

Click on screen does not toggle pause/resume.

Use the controlbar's play button instead.

<head/>

<style>

/* make room for fixed controls */
.flowplayer {
margin-bottom: 30px;
}
 
/* default cursor for screen */
.flowplayer .fp-ui {
cursor: default;
}
/* reinstate pointer for ui elements */
.flowplayer .fp-controls,
.flowplayer .fp-embed,
.flowplayer .fp-time,
.flowplayer .fp-duration,
.flowplayer .fp-remaining {
cursor: pointer;
}
/* no screen play button */
.is-paused.flowplayer .fp-ui {
background-image: none;
}
 
/* for devices which enforce a splash setup, e.g. iOS */
.is-splash.flowplayer {
/* background color similar to first frame of video
could also be a background image */
background-color: #001f1f;
}
/* show the controls in splash state */
.is-splash.flowplayer .fp-controls {
display: block !important;
}

CSS

<script>

flowplayer.conf = {
// embed with same skin
embed: {
skin: "//releases.flowplayer.org/7.0.2/skin/playful.css"
}
}
 
flowplayer(function (api, root) {
// disable click on screen
$(".fp-ui", root).click(function (ev) {
// but do not disable click on other UI elements
// i.e. confine to parent element with class="fp-ui"
if ($(ev.target).hasClass("fp-ui")) {
ev.stopPropagation();
}
});
});

JavaScript

<body/>

<div class="flowplayer play-button fixed-controls" data-ratio="0.4167">
<video>
<source type="video/webm" src="//edge.flowplayer.org/playful.webm">
<source type="video/mp4" src="//edge.flowplayer.org/playful.mp4">
</video>
</div>

HTML