How to embed Videosync videos to your own web page

Here are instructions on how to embed Videosync events to your web page.

If you need any help, just contact us at support@videosync.fi.

❗ Note that the iframe resizer script does not work properly on this Notion page. To see how it should work, go to https://videosync.fi/html/videosync-embed/

1. Embed using iframe-resizer

1. Copy iframe script from VideoSync event (or ask from your Videosync contact) and embed it to your web page
2. Add following code block at the end of the body-section

<iframe
  src="https://flik.videosync.fi/katsoja-testi-embed-slides?embed-view=1" 
  width="100%"
  height="282"
  scrolling="no"
  allowfullscreen
  allowFullScreen
  frameborder="0"></iframe>

<script type="text/javascript" src="https://cdn.videosync.fi/assets/iframe-resizer/js/iframeResizer.min.js"></script>
<script>iFrameResize({ log: true })</script>

The end result should look like this: (Notion does not resize the player correctly, pleas see live demo at https://videosync.fi/html/videosync-embed/ )

Embed: https://flik.videosync.fi/katsoja-testi-embed-slides?embed-view=1

If you want to by-pass the registration, you can add this parameter to the iframe code:

disable-registration=1

For details on iframe-resizer, see http://davidjbradshaw.github.io/iframe-resizer/.

2. Embed using css styles

Use this only if

1. You can’t use iframe-resizer, or
2. You are embedding only the video with no slides (the embedded content is always 16:9)

<style>
  .player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="player-wrapper">
  <iframe
    src="//flik.videosync.fi/test-stream/?embed-view=1"
    allowfullscreen
    allowFullScreen
    width="500"
    height="282"
    scrolling="no"
    frameborder="0">
  </iframe>
</div>

The end result should look like this: (live demo at https://videosync.fi/html/videosync-embed/ )

Embed: https://flik.videosync.fi/test-stream/?embed-view=1

3. Cookie limitations with Safari and Chrome in incognito mode

Current browsers (especially Safari and Chome in ingognito mode) are now blocking 3rd party cookies and when you embed videosync player to your website, videosync cookies are treated as 3rd party cookies.

We use cookies in Videosync for authentication and registration features to identify whether the user is already authenticated or registered. If your video has authentication or registration enabled, it means that the browsers blocking 3rd party cookies won’t remember user’s session. By default Videosync lets user to insert the password or register, but if viewer refreshes the page the viewer will need to auth/register again.

We have built optional workaround to preserve the session even in the browsers blocking the cookies. It stores the session to parent page’s (your page) localstorage and to enable it you will need to add this script to the page(s) you are embedding videos.

<script type="text/javascript" src="//cdn.videosync.fi/assets/iframe-register/js/iframeRegister.min.js"></script>

Advanced iframe controls (window.postMessage & events)

4. Control Videosync player via window.postMessage()

The Videosync viewing page within the iframe receives postMessage messages. The ‘seekTo’ variable moves the player’s timeline to the specified second parameter, ‘play’ turns on the player, and ‘pause’ stops it. The format in which post messages are sent is:

player: {
  seekTo: number, // in seconds
  play: boolean,
  pause: boolean,
	mute: boolean,
	getCurrentTime: boolean
}

As an example, consider the following code that is used to send a message to the children page to seek to a specific time in the video player if the page is in an iframe:

const iframe = document.querySelector("iframe").contentWindow;
const messageToSend = {
  player: {
    seekTo: 10,
  }
};
// Replace VIDEOSYNC_DOMAIN with the domain where the player is embedded
iframe.postMessage(messageToSend, "VIDEOSYNC_DOMAIN");

Documentation on iframe.postMessage() can be found at https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Note on autoplay: Browsers generally block autoplay, including the messages sent via iframe messaging. More info here: https://developer.bitmovin.com/playback/docs/why-doesnt-autoplay-work-consistently-on-browsers

getCurrentTime

If you request getCurrentTime, the iframe sends back the following message:

{
	currentTime: time, // Returns the current playback time in seconds of the video
	type: "currentTime"
}

5. Listening for VideoSync Player Events in Parent Page

In the parent page, you can use the following code to listen for events emitted by the embedded VideoSync player in an iframe. The example demonstrates the handling of the “playbackfinished” event. Customize the code and functions according to your specific needs for event handling

💡 Enable receiving the events by adding query parameter ?player-events=1 to embed urls

// Select the iframe using querySelector
const iframe = document.querySelector('iframe').contentWindow;

// Listen for messages from the iframe
window.addEventListener('message', function(event) {

	// NOTE: Change this to your Videosync player origin
  var allowedOrigin = "https://acme.videosync.fi";

  if (event.origin === allowedOrigin) {
    const receivedMessage = event.data;
    // Handle the received message
    switch (receivedMessage.type) {
      case 'playbackfinished':
        handlePlaybackFinished(receivedMessage);
        break;
      // Add other cases for different message types if needed
      default:
        // Handle unknown message types or ignore
        break;
    }
  } else {
    console.warn('Received message from an untrusted origin.');
  }
});

// Function to handle the "playbackfinished" event
function handlePlaybackFinished(message) {
  // Perform actions based on the playback finished event
  console.log('Playback finished at timestamp:', message.timestamp);
  // Add your custom logic here
}

The VideoSync player embedded in the child page sends the following messages to the parent page:

playbackfinished Message:

{
	timestamp: 1706531091352,
	type: "playbackfinished"
}

sourceloaded Message:

{
  timestamp: 1706530802452,
  type: "sourceloaded"
}

sourceunloaded Message:

{
  timestamp: 1706530802452,
  type: "sourceunloaded"
}

timechanged Message:

{
  time: 4.050941,
  timestamp: 1706530872351,
  type: "timechanged"
}

play Message:

{
  issuer: "ui",
  time: 4.144504,
  timestamp: 1706530919392,
  type: "play"
}

warning Message

{
    "type": "warning",
    "timestamp": 1706543293204,
    "code": 1303,
    "name": "PLAYBACK_COULD_NOT_BE_STARTED",
    "message": "1303/PLAYBACK_COULD_NOT_BE_STARTED"
}

seek Message

{
    "type": "seek",
    "timestamp": 1706543429330,
    "position": 0,
    "seekTarget": 5,
    "issuer": "api"
}

muted Message

{
    "type": "muted",
    "timestamp": 1707893052969,
    "issuer": "ui-volumecontroller"
}

unmuted Message

{
    "type": "unmuted",
    "timestamp": 1707893052969,
    "issuer": "ui-volumecontroller"
}

If this list is missing some event you need, just reach our support. All available events are listed here https://cdn.bitmovin.com/player/web/8/docs/enums/Core.PlayerEvent.html

If you have any issues with embed codes, please contact videosync support: support@videosync.fi