Overlay

User interface classic.

play button 1
play button 2
play button 3
play button 4
Our overlay plugin in its "native" vendor implementation. The overlay option is set to the trigger element selector. That's it.
/* limit player size for 1:1 display aspect ratio */
.flowplayer-overlay-mask .flowplayer.fp-minimal.no-volume {
max-width: 50% !important;
}
/* an overlay trigger element */
.overlay {
width: 166px;
height: 166px;
display: inline-block;
background: #fff url("//flowplayer.org/media/img/demos/playlist/thumbs.jpg") no-repeat;
cursor: pointer;
margin: 0 1% 2% 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.overlay img {
margin: 63px;
}
/* sprite positions for each overlay */
#overlay1 {
background-position: -1px -1px;
}
#overlay2 {
background-position: -197px -1px;
}
#overlay3 {
background-position: -393px -1px;
}
#overlay4 {
background-position: -589px -1px;
}

CSS
<!-- overlay trigger 1 -->
<div id="overlay1" class="overlay">
<img width="40" height="40" alt="play button 1"
src="//releases.flowplayer.org/6.0.5/skin/img/play_white.png">
</div>
<!-- overlay player 1 -->
<div data-overlay="#overlay1" data-ratio="1"
class="flowplayer fp-minimal no-volume">
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city1/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city1/480x480.mp4">
<source type="video/flash"
src="mp4:city1/480x480"></video>
</div>
 
<!-- overlay trigger 2 -->
<div id="overlay2" class="overlay">
<img width="40" height="40" alt="play button 2"
src="//releases.flowplayer.org/6.0.5/skin/img/play_white.png">
</div>
<!-- overlay player 2 -->
<div data-overlay="#overlay2" data-ratio="1"
class="flowplayer fp-minimal no-volume">
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city2/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city2/480x480.mp4">
<source type="video/flash"
src="mp4:city2/480x480"></video>
</div>
 
<!-- overlay trigger 3 -->
<div id="overlay3" class="overlay">
<img width="40" height="40" alt="play button 3"
src="//releases.flowplayer.org/6.0.5/skin/img/play_white.png">
</div>
<!-- overlay player 3 -->
<div data-overlay="#overlay3" data-ratio="1"
class="flowplayer fp-minimal no-volume">
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city3/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city3/480x480.mp4">
<source type="video/flash"
src="mp4:city3/480x480"></video>
</div>
 
<!-- overlay trigger 4 -->
<div id="overlay4" class="overlay">
<img width="40" height="40" alt="play button 4"
src="//releases.flowplayer.org/6.0.5/skin/img/play_white.png">
</div>
<!-- overlay player 4 -->
<div data-overlay="#overlay4" data-ratio="1"
class="flowplayer fp-minimal no-volume">
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city4/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city4/480x480.mp4">
<source type="video/flash"
src="mp4:city4/480x480"></video>
</div>

HTML

view standalone page

jQueryTools overlay | Fancybox overlay

Inlay

Never lose the context

Inlay makes a transition from splash state to video playback "in place". These are super easy with Flowplayer because JavaScript is not needed at all. It's all CSS.
#inlay {
background: #333 url("//flowplayer.org/media/img/demos/layout/coffee2.jpg") 0 0 no-repeat;
}
#inlay .fp-ratio {
/* initial state */
-webkit-transition: padding-top 0.5s;
-moz-transition: padding-top 0.5s;
transition: padding-top 0.5s;
padding-top: 45%;
}
#inlay.is-splash {
cursor: default;
}
#inlay.is-splash .fp-ui {
/* initially the nested UI element works as thumbnail */
background: #333 url("//flowplayer.org/media/img/demos/layout/coffee3.jpg") 0 0 no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
top: auto;
bottom: 10%;
border: 3px solid #eee;
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.25);
box-shadow: 0 0 15px rgba(0,0,0,0.25);
left: 5%;
width: 25%;
height: 42%;
}
#inlay.is-ready {
/* playback starts */
background: #fff;
}
#inlay.is-ready .fp-ratio {
padding-top: 75%;
}
#inlay.is-ready .info {
display: none;
}

CSS
<!-- ratio is set dynamically via CSS -->
<div id="inlay" data-ratio="false"
class="flowplayer fp-full fp-edgy is-splash is-closeable">
<video>
<source type="video/webm"
src="//edge.flowplayer.org/coffee/640x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/coffee/640x480.mp4">
<source type="video/flash"
src="mp4:coffee/640x480"></video>
</div>

HTML

view standalone page

Tooltip

Click on the red dots

More demos without the use of JavaScript. The CSS code simply uses the "is-loading" and "is-ready" state classes to make the player visible.
#tooltip {
max-width: 1032px;
padding-top: 59%;
background: url("//flowplayer.org/media/img/map.png");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
position: relative;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#tooltip .flowplayer {
position: absolute;
cursor: default;
width: 30px;
}
#tooltip .flowplayer .fp-ui {
display: none;
}
#tooltip .flowplayer .fp-toggle {
display: block;
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
background-color: #f00;
width: 20px;
height: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
border: none;
}
#tooltip .flowplayer.is-loading,
#tooltip .flowplayer.is-ready {
/* playback starts -> reveal player */
cursor: pointer;
background-color: #333;
-webkit-box-shadow: 5px 5px 20px #333;
-moz-box-shadow: 5px 5px 20px #333;
box-shadow: 5px 5px 20px #333;
width: 300px;
z-index: 100;
}
#tooltip .flowplayer.is-loading .fp-ui,
#tooltip .flowplayer.is-ready .fp-ui {
display: block;
}

CSS
<div id="tooltip" class="demo">
 
<div class="flowplayer fp-minimal is-closeable"
data-ratio="1"
data-splash="true"
style="top:10%; left:22%">
<span class="fp-toggle"></span>
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city1/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city1/480x480.mp4">
<source type="video/flash"
src="mp4:city1/480x480"></video>
</div>
 
<div class="flowplayer fp-minimal is-closeable"
data-ratio="1"
data-splash="true"
style="top:17%; left:47%">
<span class="fp-toggle"></span>
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city2/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city2/480x480.mp4">
<source type="video/flash"
src="mp4:city2/480x480"></video>
</div>
 
<div class="flowplayer fp-minimal is-closeable"
data-ratio="1"
data-splash="true"
style="top:25%; left:25%">
<span class="fp-toggle"></span>
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city3/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city3/480x480.mp4">
<source type="video/flash"
src="mp4:city3/480x480"></video>
</div>
 
<div class="flowplayer fp-minimal is-closeable"
data-ratio="1"
data-splash="true"
style="top:49%; left:49%">
<span class="fp-toggle"></span>
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city4/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city4/480x480.mp4">
<source type="video/flash"
src="mp4:city4/480x480"></video>
</div>
 
<div class="flowplayer fp-minimal is-closeable"
data-ratio="1"
data-splash="true"
style="top:34%; left:84%">
<span class="fp-toggle"></span>
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city5/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city5/480x480.mp4">
<source type="video/flash"
src="mp4:city5/480x480"></video>
</div>
 
<div class="flowplayer fp-minimal is-closeable"
data-ratio="1"
data-splash="true"
style="top:60%; left:60%">
<span class="fp-toggle"></span>
<video>
<source type="video/webm"
src="//edge.flowplayer.org/city6/480x480.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/city6/480x480.mp4">
<source type="video/flash"
src="mp4:city6/480x480"></video>
</div>
 
</div>

HTML

view standalone page