Testing local development build - all iframes point to localhost
The &layout=desktop mode maintains a strict 16:9 aspect ratio. Vertical videos get pillarboxing (black bars on sides).
&layout=desktop
/* Vertical videos get black bars on sides */
&layout=desktop
/* Horizontal videos fill naturally */
The &layout=mobile parameter creates a tall 3:4 container. Works for both vertical AND horizontal videos.
&layout=mobile
&layout=mobile
/* Horizontal gets letterboxing */
The &layout=square creates a 1:1 square container.
&layout=square
Test autoplay with the &autoplay=1 parameter.
&autoplay=1&layout=desktop
This demo shows how to control the player from outside the iframe using the postMessage API. The player has &controls=0 to hide the built-in controls.
// Embed with hidden controls: &controls=0
// <iframe src="...?v=author/id&mode=iframe&controls=0">
// Setup: Get iframe and create helper
const iframe = document.getElementById('player');
const send = (cmd, data = {}) =>
iframe.contentWindow.postMessage({ type: cmd, ...data }, '*');
// PLAYBACK CONTROLS
send('toggle-play'); // Toggle play/pause
send('play'); // Start playing
send('pause'); // Pause video
send('toggleFullscreen'); // Toggle fullscreen
// VOLUME CONTROLS
send('setVolume', { volume: 0.5 }); // Set to 50%
send('volumeUp', { step: 0.1 }); // +10%
send('volumeDown', { step: 0.2 }); // -20%
send('toggleMute'); // Toggle mute
send('mute'); // Mute
send('unmute'); // Unmute
// SEEKING
send('seek', { time: 30 }); // Go to 30s
send('seekForward', { seconds: 15 }); // +15s
send('seekBackward', { seconds: 5 }); // -5s
send('seekForward'); // +10s (default)
send('seekBackward'); // -10s (default)
// GET CURRENT STATE
send('getState'); // Triggers '3speak-state' event
// LISTEN FOR EVENTS
window.addEventListener('message', (e) => {
const { type, currentTime, duration,
paused, muted, volume } = e.data;
if (type === '3speak-timeupdate') {
console.log(`${currentTime}s / ${duration}s`);
}
if (type === '3speak-play') console.log('Playing');
if (type === '3speak-pause') console.log('Paused');
if (type === '3speak-ended') console.log('Ended');
});