Fix fp-toggle for Flash · Flowplayer
Work around a bug in this demo for the is-finished state class.
Hiding the player via
#is-finished-demo.is-finished .fp-ui, #is-finished-demo.is-finished .fp-engine {
display:none;
}
breaks in Flash unless we unload it before - no hidden Flash object!
Therefore we hide the player by positioning it outside the page:
#is-finished-demo.is-finished .fp-ui, #is-finished-demo.is-finished .fp-engine {
top: -9999em;
}
<head/>
<script>
/*
Source file:
https://github.com/flowplayer/www/blob/master/content/media/css/basics/finish.styl
*/
.when-video-ends{position:absolute;top:20%;left:-9999em;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);text-align:center;width:100%;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;transition:opacity .5s;}
.when-video-ends h3{font-size:60px;font-weight:bold;margin-bottom:-10px;color:#ccc}
.when-video-ends h4{font-size:25px;color:#777}
.when-video-ends .button{background-color:#00a6bc;padding:20px 30px;margin:15px 0;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;font-size:20px;color:#eee;cursor:pointer;display:inline-block;-webkit-transition:background-color .1s;-moz-transition:background-color .1s;transition:background-color .1s;}
.when-video-ends .button:hover{background-color:#00afc6}
.when-video-ends .button:active{background-color:#009db2}
.when-video-ends .fp-toggle{display:block;color:#777;font-size:smaller;cursor:pointer;}
.when-video-ends .fp-toggle:hover{color:#444}
#is-finished-demo{background:url("//flowplayer.org/media/img/demos/black_big.jpg");}
#is-finished-demo.is-finished{background:#333;-webkit-transition:background-color .7s;-moz-transition:background-color .7s;transition:background-color .7s;}
/* instead of hiding the player, for the sake of Flash, position the engine outside the page */
/* #is-finished-demo.is-finished .fp-ui,#is-finished-demo.is-finished .fp-engine{display:none} */
#is-finished-demo.is-finished .fp-ui,#is-finished-demo.is-finished .fp-engine{top:-9999em;}
#is-finished-demo.is-finished .when-video-ends{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);left:0}