Fullscreen functionality

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

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
Copy to clipboard

HTML

<div id="Container">
  <iframe
    id="UstreamIframe"
    width="100%" height="100%"
    src="https://video.ibm.com/embed/recorded/131906526?hideFullscreen"
    frameborder="0"
    allowfullscreen
    referrerpolicy="no-referrer-when-downgrade"
  >
Copy to clipboard

CSS

#Container {
  position: relative;
  width: 640px;
  height: 390px;
}

#Container.fullscreen {
  width: 100%;
  height: 100%;
Copy to clipboard