Flowplayer · Controls only

Click on screen does not toggle pause/resume.

Use the controlbar's play button instead.

<head/>

<style>

/* default cursor for screen */
.flowplayer .fp-ui {
cursor: default;
}
/* re-instate pointer cursor for controls
* and header control elements */
.flowplayer .fp-controls,
.flowplayer .fp-header>* {
cursor: pointer;
}
 
/* 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 poster and splash state */
.is-poster.flowplayer .fp-controls,
.is-splash.flowplayer .fp-controls,
.is-splash.flowplayer .fp-timeline {
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
}
.is-splash.flowplayer .fp-timeline,
.is-splash.flowplayer .fp-progress {
/* no-op timeline overpainted with playful controls color */
background-color: #006680;
}

CSS

<script>

flowplayer(function (api, root) {
// remove big play/pause button
$(".fp-ui>.fp-play, .fp-ui>.fp-pause", root).remove();
 
// 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 fp-playful" 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