Skip to main contentIBM Video Streaming Developers

Fullscreen functionality

Third party player controls should implement the fullscreen functionality on the client side with the HTML5 Fullscreen API.

Necessary steps

  • switch your embed container to fullscreen mode with HTML5 FullScreen API
  • handle the iframe size accordingly
  • IBM Video Streaming embed will adopt to the resized iframe size responsively

Example

Active loading indicator

Javascript

var fullScreenBtn = document.getElementById('fullScreenBtn');
var container = document.getElementById('Container');
document.addEventListener("fullscreenchange",changeHandler);
document.addEventListener("webkitfullscreenchange",changeHandler);
document.addEventListener("mozfullscreenchange",changeHandler);
document.addEventListener("MSFullscreenChange", changeHandler, false);
// trigger fullscreen change on our custom button click

HTML

<div id="Container">
<iframe
id="UstreamIframe"
width="100%" height="100%"
src="https://www.ustream.tv/embed/1524?controls=false"
frameborder="0"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
>

CSS

#Viewer {
position: relative;
width: 640px;
height: 390px;
}
#Viewer.fullscreen {
width: 100%;
height: 100%;