loading

Multiview example

In this example the content of the player is loaded and changed dynamically, providing an easy way for seamless switching between live or VOD contents.

This feature of the Embed API can be used in various use cases, like switching between

multiple cameras
simultaneous sessions of a conference
multi-language streams
or to promote further channels.

Example

HTML

<div class="player-container">
    <iframe
      id="MultiviewPlayer"
      src="//video.ibm.com/embed/23935269"
      frameborder="0"
      allowfullscreen
      webkitallowfullscreen
      scrolling="no"
      referrerpolicy="no-referrer-when-downgrade"
Copy to clipboard

JavaScript

var _contents = document.querySelectorAll('.multiview-chooser a'),
    _active = _contents[0],
    embedApi = UstreamEmbed('MultiviewPlayer');

Array.prototype.forEach.call(_contents, function (_a){
    _a.onclick = function(e){
        e.preventDefault();
        e.stopPropagation();

Copy to clipboard

CSS

.player-container {
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
}

.player-container iframe {
    position: absolute;
    top: 0;
Copy to clipboard

Edit this page on GitHub

Examples: Dynamic insertion

Examples: Multiple instances