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.

<style>

.player-frame-wrapper {
position: relative;
width: 100%;
}
.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;
}

CSS

<body/>

<div class="player-frame-wrapper">
 
<iframe src="http://demos.flowplayer.org/basics/iframe-src.html"
class="player-frame"
allowfullscreen></iframe>
 
<div class="player-frame-wrapper-ratio"></div>
</div>

HTML

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;
}

CSS
flowplayer.conf = {
fullscreen: true,
// iOS allows only native fullscreen from within iframes
native_fullscreen: true
};

JavaScript
<div class="flowplayer" data-ratio="0.4167">
 
<video>
<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">
</video>
 
</div>

HTML