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. (Safari) Embedding event with registration and/or password protection enabled

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

3. (Safari) Embedding a protected event (eg.registration and/or password)

On Safari browsers (mobile and desktop) there is an issue with cookies inside iframe. Safari won't set cookie in a iframe, unless user has already been on the site and used cookies there.

Why do you need to set cookies?

In registration and for example password protected page, we need to set a cookie which contains a view token to ensure user has right to view the page. Without this, user would need to register or set password on every page refresh.

How do I fix it?

To fix this issue, we offer a script that has to be inserted to the page where iframe is set.

Modify and insert this script right after the starting <head> tag:

<script src="https://<ACCOUNT>.videosync.fi/<EVENT-URL>/safaricfix"></script>

Change <ACCOUNT> and <EVENT-URL> so it's the same event that you are embedding but with /safaricfix at the end.

So... What does it do?

It redirects to the event url, sets a dummy cookie (name is _vsync_cookie) and comes back to the site where it was called. After that, iframe can set cookies with no problem. It only does the redirect once (after the cookie is set), so refreshing the page does not do anything after the initial run.

This safari cookiefix script does not do anything on other browsers!