Video Gallery
Video Gallery
Four videos in a grid.
flowplayer("#player1", {
src: "56058953-2cbd-4858-a915-1253bf7ef7b2/00dc2cd3-3813-4869-8ab8-00ece266b958",
poster: "https://flowplayer.com/resources/demos/images/restaurants/4.jpeg"
})
flowplayer("#player2", {
src: "56058953-2cbd-4858-a915-1253bf7ef7b2/00dc2cd3-3813-4869-8ab8-00ece266b958",
poster: "https://flowplayer.com/resources/demos/images/restaurants/5.jpeg"
})
flowplayer("#player3", {
src: "56058953-2cbd-4858-a915-1253bf7ef7b2/00dc2cd3-3813-4869-8ab8-00ece266b958",
poster: "https://flowplayer.com/resources/demos/images/restaurants/6.jpeg"
})
flowplayer("#player4", {
src: "56058953-2cbd-4858-a915-1253bf7ef7b2/00dc2cd3-3813-4869-8ab8-00ece266b958",
poster: "https://flowplayer.com/resources/demos/images/restaurants/3.jpeg"
})
.item {
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin: 0 -2px;
padding: 1em;
width: 50%;
}
/* mobile layout */
@media (max-width: 900px) {
.item { width: 100% }
}
<div id="gallery">
<div class="item">
<div id="player1">
</div>
</div>
<div class="item">
<div id="player2">
</div>
</div>
<div class="item">
<div id="player3">
</div>
</div>
<div class="item">
<div id="player4">
</div>
</div>
</div>
Wowza Flowplayer Demos
The most popular setups on the Internet.
Standard layout
The most common video-setup in the Internet.
Video recommendations
Show related videos after the playback is finished.
Video thumbnails
Render thumbnails for individual scenes for easy scanning of the video.
Background video
Play video behind the other elements.
Audio-only setup
Use Flowplayer for podcasts and music.
Video gallery
Four videos in a grid.
Video perspective
That subtle decoration for your video.
Floating video
Press play and scroll to see the player floating on the bottom/left corner of the browser window.
Custom call-to-action button
Nudge visitors towards the action
Adaptive bitrate streaming (ABR)
The dynamic switching of the video quality