Add Vilynx Gallery to your website

Getting started

Get a Vilynx Dashboard account

If you already have a Vilynx account and some videos uploaded, you can go to the next step: get your public key

To create and configure a new account, read the quick setup guide here.

Get your public key

Once you've uploaded some videos to your Vilynx account, you can get the public key for the Vilynx Gallery Plugin.

To do so, log in to your Vilynx Dashboard , click your profile pic and choose “Get the Vilynx Code” from the dropdown. It will give you the line of code needed to paste in the page(s) where you want the Gallery to show.

<script src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        data-publickey="youruserhash"
        data-redirect="true"></script>
  • data-publickey="yourpublickey" This is your user ID.
  • data-redirect="true" Shows a countdown while user is hovering over the video. Once the countdown is finished, the user will be redirected to the video content.

With this configuration you will have the basic Gallery user experience which consists of:

  • For Desktop browsers, previews play when the user hovers over the video thumbnail with a redirect countdown to your video content.
  • For Mobile devices, previews play when tease enters the viewport. Only one preview plays at a time due to browser limitations.

The Gallery plugin allows you to fully customize the experience according to your needs. Continue reading to learn more.

Supported DOM structures

The Vilynx Gallery plugin looks for certain DOM patterns containing a valid video ID that corresponds to a video in your account. The basic pattern consists of a DOM element with an image inside -- we will refer to the outer DOM Element as preview container and the inner image will be called as preview thumbnail:

  • The preview container must contain your video ID so it can be linked to the correct preview. This can be set as the href, if is inside an <a> TAG, or data-vilynx-id. (If your DOM elements already have an attribute which contains the video ID and with a different name you can use it with idattribute parameter)
  • The preview thumbnail can be an HTML Image Element with a valid src, an HTML Picture with a valid srcset or any other DOM element with a background-image set by the style attribute.

Gallery plugin is compatible with most DOM structures. Some examples of supported DOM structures are shown below:

Video URL on an HREF inside an <a> TAG

<a> TAG with a Video URL and HTML Image as preview thumbnail

<a href="your_video_URL">
    <img src="img/bg01.jpg">
</a>

Show live example

See the Pen a - href - img by Vilynx (@Vilynx) on CodePen.

<a> TAG with a video URL and a DIV with background-image as preview thumbnail

<a href="your_video_URL">
    <div style="background-image: url('img/bg01.jpg')">
</a>

Show live example

See the Pen a - href - bg by Vilynx (@Vilynx) on CodePen.

The Vilynx Gallery plugin takes the HREF value of your <a> TAG and compares it with the video IDs in your account. If this value matches with any of your IDs, your image will be replaced by the preview.

Video ID on a data-vilynx-id attribute

<div> TAG with an video ID and and HTML Image as preview thumbnail

<div data-vilynx-id="your_video_ID">
    <img src="img/bg01.jpg">
</div>

<span> TAG with an video ID and and HTML Image as preview thumbnail

<span data-vilynx-id="your_video_ID">
    <div style="background-image: url('img/bg01.jpg')">
</span>

The Vilynx Gallery plugin will look for every DOM Element with a data-vilynx-id attribute to compare its value with your video IDs stored in your Vilynx account.

DOM Element with video ID and background image

<div data-vilynx-id="your_video_ID" style="background-image: url('img/bg01.jpg')"></div>

If background-image is set on your preview container this element will also be evaluated as a preview thumbnail candidate, and will append the preview behind it.