Extras

Controlling the embedded iframe player via postMessage events

Vidzflow embedded videos allow the integrator to control various operations of the video using postMessage functionality.

Play

var iframe = document.querySelector('iframe')
iframe.contentWindow.postMessage("playerPlay", "*")

Code above will trigger play of the video.

Pause

var iframe = document.querySelector('iframe')
iframe.contentWindow.postMessage("playerPause", "*")

Code above will trigger pause of the video.

Stop

To stop the video playback and reset it to the beginning:

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage("playerStop", "*");

Mute

To mute the video:

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage("playerMute", "*");

Unmute

To unmute the video:

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage("playerUnmute", "*");

Set volume

To set the volume:

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({ type: "playerVolume", volume: 0.3 }, "*");

Note: Values for setting the volume range from 0 to 1, with 0.1 steps.

Set time (seek)

To seek to specified time:

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({ type: "playerSeek", time: 3 }, "*");

Note: The provided value is seconds.

Fullscreen

To open fullscreen:

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage("playerFullscreen", "*");

Key Limitations:

1. Fullscreen Activation:

   • Limitation: The fullscreen functionality may not work if the user has not interacted with the player.

   • Explanation: Modern browsers enforce user interaction before allowing fullscreen mode to prevent disruptive experiences. This means that calling the playerFullscreen command via postMessage will only work if the user has already interacted with the iframe player (e.g., clicking on the player).

2. Unmute Function:

   • Limitation: The unmute functionality may not work if the user has not interacted with the player.

   • Explanation: Browsers typically require a user gesture (like a click) before allowing audio to play. This is a safeguard to prevent unwanted sound from autoplaying on a website. Therefore, the playerUnmute command will only be effective if the user has previously interacted with the iframe player.