Flowplayer · Iframe

IFRAME loaded from here.

To allow the player go fullscreen from an IFRAME you must

We also make the iframe and the player within it responsive by adding a wrapper element around the iframe which replicates the container/ratio stanza and make the iframe fill it.


.player-frame-wrapper {
position: relative;
width: 100%;
/* room for slim timeline */
padding-bottom: 3px;
.player-frame-wrapper-ratio {
/* same as player ratio */
padding-top: 41.67%;
.player-frame {
/* make iframe fill wrapper */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;



<div class="player-frame-wrapper">
<iframe src="//demos.flowplayer.com/v6/basics/iframe-src.html"
<div class="player-frame-wrapper-ratio"></div>


This is the relevant code of the loaded IFRAME page:

body, html {
/* no scrollbars */
overflow: hidden;
/* pin player to top left corner of page/iframe */
margin: 0;
padding: 0;
.flowplayer {
/* fonts for UI widgets */
font-family: "myriad pro", tahoma, verdana, arial, sans-serif;

flowplayer.conf = {
fullscreen: true,
// iOS allows only native fullscreen from within iframes
native_fullscreen: /ip(ad|hone|od)/i.test(navigator.userAgent)

<div class="flowplayer" data-ratio="0.4167">
<source type="application/x-mpegurl" src="//edge.flowplayer.org/functional.m3u8">
<source type="video/webm" src="//edge.flowplayer.org/functional.webm">
<source type="video/mp4" src="//edge.flowplayer.org/functional.mp4">