Using CSS and Javascript for customization

Intro

Here you can find the most common HTML/CSS/JS customizations and snippets to use in your Videosync events.

Modifying only the appearance (CSS)

Access CSS editor in Videosync Admin: Advanced → Advanced Settings → CSS editor

How do I hide or show an element?

You can hide and show different elements by removing or adding display: none; in the CSS editor for the corresponding element id. You have to find out the name of the required element using the browser’s inspector or from the list below.

To show:

1. Go to Advanced → Advanced settings → CSS editor
2. (Ctrl+f) search for the right element, e.g. chat messages #chatboard-comments { display: none; }
3. Remove display: none;

To hide:

1. Go to Advanced → Advanced settings → CSS editor
2. Add the following code #chatboard-comments { display: none; }

Element names

/* Names of the most common main elements in event page */

#vs-header {
  /* Top bar with the event title */
}

#vs-about-below-video {
  /* About section directly below video player */
}

#vs-about-section {
  /* Normal about section */
}

#vs-registration {
  /* Registration form area */
}

#vs-presentation {
  /* General video player & slide (& chat next to video) area*/
}

#vs-reactions {
  /* Emoji reactions below video player */
}

#vs-thumbnails {
  /* Slide thumbnails carousel below video & slide */
}

#vs-attachments {
  /* Attachments list */
}

#vs-hidden {
  /* Hidden state placeholder for the player/slide area. Usually contains text "Live is paused" etc.
  Applies to pre-live, paused and hidden-od states. */
}

#vs-messageboard {
  /* Chat / Messageboard either next to video player or below it as an own section */
}

#vs-links {
  /* Link grid */
}

#vs-chapters {
  /* Chapters list */
}

#vs-chapter-select {
  /* Chapter select dropdown in on-demands */
}

#vs-footer {
  /* Main footer */
}

#vs-videosync-footer {
  /* Videosync's own small footer on the bottom with terms, privacy policy, copyright notice */
}

#vs-users-list {
  /* Participants list as a section on the page */
}

/* Notify the dev team (support@videosync.fi) if something should be added to this list */

I can’t find an element, for example “Speakers list” anywhere on the admin page. Where is it and how can I edit it?

It is most likely custom made HTML structure in the about section. Check it out and look for HTML tags containing the information you’re looking for:

<tags class="custom">INFO: Speaker Name</tags>

Now, it’s easy to change the necessary information to what you want, e.g. Speaker Name → Another Alias without touching the HTML code.

The styles related to this element can also be found by searching the .custom class name within the Advanced → Advanced settings → CSS editor:

.custom {
  color: red;
}

How can I use a Google font

Add the following code to CSS editor:

/* Inter as an example */
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

body {
  font-family: "Inter", sans-serif;
}

Changing the order of page elements

/* Add this to make the "order" rules work */
.vs-mainwrapper {
  display: flex;
  flex-direction: column;
}

/* Add the rule "order: " to all necessary elements followed by the
respective number in which order you want them to be */
#vs-header {
  order: 0;
}

#vs-about-section {
  order: 2;
}

#vs-presentation {
  order: 1;
}

Full width background image for the hidden text

Good size for a background image is 1980x1080

/* Hidden as an example */
#vs-hidden {
  background-size: cover;
}

Adding new elements (HTML+CSS+JS)

Countdown to hidden state

HTML:

<div class="welcome-text-hidden">
  <h3>Tervetuloa!</h3>
  <div>
    Lähetys alkaa automaattisesti tällä sivulla <span id="date-span"></span>.
    Tapahtuman alkuun:
  </div>
</div>
<div class="hidden-text-container">
  <div class="countdown-container">
    <div><span id="days"></span><span class="count-span">Päivää</span></div>
    <div><span id="hours"></span><span class="count-span">Tuntia</span></div>
    <div>
      <span id="minutes"></span><span class="count-span">Minuuttia</span>
    </div>
    <div>
      <span id="seconds"></span><span class="count-span">Sekunttia</span>
    </div>
  </div>
</div>

CSS:

/* COUNTDOWN */

.welcome-text-hidden {
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.9;
}

.welcome-text-hidden h3 {
  margin: 0;
  font-size: 24px;
}

.welcome-text-hidden div {
  width: 300px;
  font-size: 16px;
  margin: 33px 12px 12px 0;
  line-height: 140%;
}

.countdown-container {
  flex-wrap: wrap;
  display: flex;
}

.countdown-container div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #0a121f;
  min-width: 100px;
  min-height: 108px;
  margin: 12px 12px 12px 0;
  opacity: 0.9;
  border-radius: 10px;
}

.count-span {
  line-height: 1;
  margin-top: 14px;
  font-size: 14px;
}

#days,
#hours,
#minutes,
#seconds {
  font-weight: 700;
  font-size: 40px;
}

JavaScript:

<script>
/* COUNTDOWN */

var url = window.location.pathname;

function addCountDown(e) {
  var videoEl = document.getElementById("bitmovin-player");
  var regEl = document.querySelector("#vs-registration");
  var regElContainer = document.querySelector(
    "#vs-registration .content.content-center"
  );
  var hiddenContainer = document.querySelector("#days");
  var registerForm = document.querySelector(
    "#vs-registration .content.content-center .register-form"
  );
  if (!hiddenContainer && !videoEl && !regElContainer) {
    window.requestAnimationFrame(addCountDown);
  } else if (!videoEl) {
    var date = new Date(_eventData.publishingDate);
    var countDownDay = date.getTime();
    var dateSpan = document.querySelector("#date-span");
    dateSpan.innerHTML = date.getDate() + "." + (date.getMonth() + 1) + "." + date.getFullYear();
    // today
    var now = new Date().getTime();
    if (countDownDay === now || countDownDay < now) {
      var hiddenTextContainer = document.querySelector(
        ".hidden-text-container"
      );
      hiddenTextContainer.style.display = "none";
    } else {
      setInterval(function () {
        var daysEl = document.getElementById("days");
        var hoursEl = document.getElementById("hours");
        var minutesEl = document.getElementById("minutes");
        var secondsEl = document.getElementById("seconds");
        // distance
        var currentNow = new Date().getTime();
        var distance = countDownDay - currentNow;
        // setting distance time to days, hours, minutes, seconds
        var days = Math.floor(distance / (1000 * 3600 * 24));


        var hours = Math.floor((distance % (1000 * 3600 * 24)) / (1000 * 3600));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        // display result
        if (days < 10) {
          daysEl.innerHTML = "0" + days + " ";
        } else {
          daysEl.innerHTML = days + " ";
        }
        if (hours < 10) {
          hoursEl.innerHTML = "0" + hours + " ";
        } else {
          hoursEl.innerHTML = hours + " ";
        }
        if (minutes < 10) {
          minutesEl.innerHTML = "0" + minutes + " ";
        } else {
          minutesEl.innerHTML = minutes + " ";
        }
        if (seconds < 10) {
          secondsEl.innerHTML = "0" + seconds + " ";
        } else {
          secondsEl.innerHTML = seconds + " ";
        }
        if (seconds < 0) {
          var hiddenTextContainer = document.querySelector(
            ".hidden-text-container"
          );
          hiddenTextContainer.style.display = "none";
        }
      }, 1000);
    }
  }
}

if (!url.includes("register")) {
  addCountDown();
}
</script>

Topic list to About section

HTML:

<ul>
  <li>Topic 1</li>
  <li>Topic 2</li>
  <li>Topic 3</li>
  <li>Topic 4</li>
  <li>Topic 5</li>
</ul>

Looks like this:

• Topic 1
• Topic 2
• Topic 3
• Topic 4
• Topic 5