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 have any issues with embedding, please contact support by mail support@videosync.fi

Table of contents

  1. Embed using iframe-resizer.
  2. Embed using css styles
  3. Cookie limitations with Safari and Chrome in incognito mode

1. Embed using iframe-resizer

  1. Copy iframe script from Videosync event (or ask from your Flik 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:

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

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>

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