Getting started

Before using any of our products you need to sign up to create a Vilynx account and upload some videos to your Dashboard.
If you are already a user skip this.

Create your account

The first thing you need to do to get started with Vilynx Gallery is sign up for a free account: Register your account now
Are you already a user? Sign in

Upload your videos

Upload your videos to your Vilynx account: either automatically (MRSS) or manually from your computer or your cloud accounts.

a. Media RSS Feed

Using a Media RSS (MRSS) feed it's the easiest way to automatically create video previews for your videos. Go to your Vilynx Dashboard and paste the URL of your MRSS feed here:

Settings / MRSS Feeds / Add a New Feed

As new videos are published to the MRSS feed, Vilynx will automatically extract the values in the <link> element and <media:content url> parameter for newly discovered items. Vilynx will automatically download the video from the URL in the <media:content url> parameter, automatically creating a video preview. The <link> element's value will be used as the external video ID that the Vilynx Gallery library uses to place the video preview on the page.

Here's an example:

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:dcterms="http://purl.org/dc/terms/">
  <channel>
    <title>Here Your MRSS Feed Title</title>
    <link>http://www.yourweb.com</link>
    <description></description>
    <item>
      <title>This is my first video</title>
	  <link>http://www.yourweb.com?videoid=0_nwhicegx</link>
	  <media:content url="http://feedproxy.google.com/~r/TEDTalks_video/~5/em-PyfAxook/DanAriely_2015U.mp4"></media:content>
    </item>
    <item>
      <title>This is my second video</title>
      <link>http://www.yourweb.com?videoid=0_nwhicegx</link>
	  <media:content url="http://feedproxy.google.com/~r/TEDTalks_video/~5/em-PyfAxook/DanAriely_2015U.mp4"></media:content>
    </item>
  </channel>
</rss>

Do you have a Youtube Channel? Use this address as your MRSS feed:

https://www.youtube.com/feeds/videos.xml?channel_id=XXXX

Where channel_id is your Youtube Channel ID. If you need help obtaining this, please visit: https://support.google.com/youtube/answer/3250431?hl=en

b. Upload videos manually

You can also easily add videos to your Vilynx account manually to create a Vilynx video preview. Go to your Vilynx Dashboard and click the Import Videos button.

  • If the videos are stored on your computer click Import videos from PC and select the videos on your computer.

  • To add videos stored in your cloud storage account (Box, Dropbox, Google Drive, PogoPlug or Microsoft OneDrive) you should first links those accounts in your Vilynx Dahsboard by clicking on:

    Settings / Cloud Accounts

    Then you can click Import videos from cloud.

    Note: To import videos from your cloud account, they must be placed in the vilynx/inbox directory. Videos will be moved from there to vilynx/videos.

Once the videos have been processed and a preview is available, you will need to assign the external video ID to each video so the Vilynx Gallery library can locate the videos on the page. Select each new video from the home page of the Vilynx Dashboard and then click Assign ID. Make sure to use the value from the href parameter in the <a> tag associated with this video or the Vilynx Gallery library will not be able to automatically discover the video on the page.

c. Let us do the job for you

If you want us to crawl your site and upload your videos for you, send us a message with your username and site URL:

Do it for me!

Vilynx Gallery

Introducing

The Vilynx Gallery

v3.0.1

Replace your static video thumbnail with the best 5 seconds of your video using only one line of code.

Discover our brand new version of the Vilynx Gallery plugin. This new release is coded in ECMAscript 6 and comes together with a bunch of other improvements in terms of efficiency, DOM changes and smaller library size.

Create your gallery

Do you already have a user account and some videos uploaded? If that's a no, read first the quick setup guide here. Otherwise, your videos are ready so it's time to add the Vilynx Gallery to your page, it's only one line of code!

In your Vilynx Dashboard, click Gallery to generate the Vilynx Gallery library. Then paste the line of code in the page(s) where you want to show it. You must place it at the end of the page's <body> section:

<script src="http://static.vilynx.com/gallery/vpg.3.0.1.min.js" userid="youruserhash" redirect="true" sharewidget="true"></script>
  • userid="youruserhash" is required when using external video ID. This is your user ID.

  • redirect="true" Shows a countdown while user is hovering the video, once the countdown is finished user get redirected to the parent link.

  • sharewidget="true" Display the social share links overlaying the video summary

Remember that the Vilynx Gallery plugin will automatically discover videos on the page that matches an external video ID identified in the Vilynx database and replace the thumbnail with the video preview. Note that this external video ID must exactly match the value of the href parameter in the <a> tag of your web page for the Vilynx video preview to be included on the web page.

There are more parameters to configure, check all the options here.


Release notes

Current version v3.0.1

Here is a list of the changes and improvements included in this new version:

  • jQuery-less. Have you ever thought it is time to drop jQuery? In this release the Vilynx Gallery plugin doesn’t use it anymore.

  • Native Browser Support for Video. All our video previews now run natively across any browser for improved speed.

  • CSS Rendering. Improved flexibility and better browser efficiency with CSS rendering

  • Improved Video Play times! Video starts playing 3–5x faster than with previous gallery versions.

  • No External Libraries. Tired of scripts that load other libraries? the Vilynx Gallery plugin uses no external libraries.

  • Small is the new smart. Compressed, minified, condensed: the updated Vilynx Gallery plugin with ES6 support only weights 41.3kB (4x smaller than before)

New Repository

This new code is beautifully packed in a repository so devops and JS ninjas can contribute and build their own solutions. This release is bundled using ES6 modules, has built-in gulp support and comes with its own server to test your code right away!
Are you interested in? Request access to our repository now by contacting us: info@vilynx.com


Usage & Options

Web page requirements

The Vilynx Gallery library looks for certain tag patterns in the web page containing the video gallery. The inner tag is always an image <img> tag and the outer tag is always an anchor <a> tag. There may also be <span>, <p> or <div> tags, though these are optional:

<a href="external_video_id">
    { <span> | <p> | <div> }
    <img />
</a>

Remember that the Vilynx Gallery library will search for the external_video_id in your uploaded video database in order to match every <a> with its video preview.


If you want to set an external_id that doesn't match your href value you can use the vilynx-id attribute. You can also use this attribute to mark your DOM objects up like this:

<a href="link_url" vilynx-id="your_video_external_id">
    <img />
</a>
<div class="vilynx_enabled" vilynx-id="your_video_external_id">
    <img />
</div>

With this attribute the Vilynx Gallery library will search for the your_ideo_external_id in your uploaded video database in order to match every <a> or <div> with its video preview.

The last option would be use a custom attribute instead of vilynx-id. When using this scheme please use idattribute configuration attribute in your Gallery definition.

<div class="vilynx_enabled" custom-attr-id="your_video_external_id">
    <img />
</div>
Options

Several options can be passed through the script:

Name type default description
userid string none Unique id to identify your Vilynx account
idattribute string vilynx-id If using another object attribute other than vilynx-id must be defined here. In the previous example, this should be idattribute=""
redirect boolean false It shows a countdown while user is hovering the video, once the countdown is finished user get redirected to the parent link
redirecttext string Redirecting in Message shown along with the redirect countdown
sharewidget boolean false Show the social share links
socialtext string none Message attached to the social network post when sharing the video preview
audio boolean true Activates audio
audio_once boolean false Summary plays first time with audio
noimage boolean true Removes the original thumbnail (displays the summary right away)
nolazy boolean false Use the lazy-load of the Vilynx divs
aggressivelazy integer (px) 200 Pixel distance between the element and the bottom of the viewport. Default value ensures the Gallery object is created before the user reaches it. A major value could be useful for faster than normal scrolling situations
nomobile boolean false Deactivates the plugin in Mobile devices
smallgif boolean false Show small resolution gifs in mobile devices, default option shows big resolution gifs
replaytimeout integer (ms) 3000 Timeout between continous video plays
divignore string CSS selector none Ignore the element defined by the CSS selector when mousing over it
optimizely boolean false Sends optimizely events to optimizely (note: it'll use the account registered in your domain). Check the Optimizely integration section
debug boolean false Print debug console logs

Here's an example:

<script src="http://static.vilynx.com/gallery/vpg.3.0.1.min.js" externalid="true" autoadjust="true" userid="userhash" button="true"></script>

Third Party Integration

Optimizely

To add a Vilynx variation to your Optimizely account, open your Optimizely Console, create a new variation and copy this code using the Edit code screen:

$(function(){
  var fileRef = document.createElement('script');
  fileRef.setAttribute("type","text/javascript");
  fileRef.setAttribute("src","http://static.vilynx.com/gallery/vpg.3.0.1min.js");
  fileRef.setAttribute("externalid","true");
  fileRef.setAttribute("vilynx","true");
  fileRef.setAttribute("button","true");
  fileRef.setAttribute("is169","true");
  fileRef.setAttribute("optimizely","true");
document.body.appendChild(fileRef);});

Once this is done, you only need to register the events that you want to track (clicks and summary plays):

  • Summary Play: register a new goal as usual and under events, select Custom Event, with this event to track: 'summary_play'.

  • Summary Click: register a new goal as usual and under events, select Custom Event, with this event to track: 'summary_click'.

  • Clicks: register a new click event. Make sure that the click event is assigned to the <a> element, no to the <img>. To verify this, please click on Advanced and make sure you're tracking the 'a', or 'a#yourlinkid'.

Top Videos

Introducing

Top Videos

Get your top videos of the day (and its summaries) whithin an awesome slider using only one line of code.

Create your slider

Do you already have a user account and some videos uploaded? If that's a no, read first the quick setup guide here. Otherwise, your videos are ready and you want to add the Top Videos slider to your page. It only takes two easy steps to embed this component.

1. Owner ID

First, you need to gather your Vilynx Gallery owner_id. You can check this by going to your Vilynx Dashboard and clicking on:

Settings / Owner Gallery ID

2. Place your slider

You can place the Top Videos component in your web sites pasting this one line of code where you want to show it:

<script userid="OWNER_ID" "http://static.vilynx.com/top_videos/vilynx_top_videos.min.js"></script>

Finally, replace the OWNER_ID with your Villynx Gallery owner id.


Usage

This are some considerations when using this component:

  • The Top Videos slider will fit the whole width of its parent container and set its height to show a 16:9 video window.

  • No margins are applied within the component. Make sure your container does have a margin if needed.

  • This component allows users using a mobile device to swipe the content with touch movement.


Download documentation

If you want to review all this offline you can download this guide in PDF format:

Download it

Social Share

Introducing

Social Share

Share your amazing video previews in any social network smoothly.
Whether you are a developer using our products in your site or a community manager sharing your videos summaries this is your help guide.

I'm a developer I'm a publisher

For developers

Vilynx Social Share will help users sharing video content from your web site. By posting the right information along with the video summary this share actions gain engagement and your site traffic increase. There are three possible options depending on your needs, your site content population and your code integration level, we'll describe each one along with its pros and cons:

1. Add Metadata

If your page has the proper metadata configured users who copy/paste your URL in their social media posts will actually be posting an awesome 5-sec preview of your video.
Achive this modifying your page metadata parameters (opengraph and twitter card) with the below metadata code and replacing the parameters showcased by {{  }} with your info:

<meta itemprop="image" content="https://www.vilynx.com/get_file.php?hash={{vilynx_id}}&url={{content_url}}&type=pro69.viwindow&format=jpg&token”/>


<!-- Twitter Card data -->

<meta name="twitter:card" content="player"/>

<meta name="twitter:site" content="{{twitter_username}}"/> 

<meta name="twitter:url" content="{{content_url}}" /> 

<meta name="twitter:title" content="{{content_title}}" />

<meta name="twitter:description" content="{{content_description}}" />

<meta name="twitter:image" content="https://www.vilynx.com/get_file.php?hash={{vilynx_id}}&url={{content_url}}&type=pro.viwindow&format=jpg&token" />

<meta name="twitter:image:width" content="640"/>

<meta name="twitter:image:height" content="360"/>

<meta name="twitter:player" content="https://www.vilynx.com/proplayer/twitter_gallery.html?owner={{vilynx_id}}&url={{content_url}}"/>

<meta name="twitter:player:width" content="640"/>

<meta name="twitter:player:height" content="360"/>

<meta name="twitter:player:stream" content="https://www.vilynx.com/get_file.php?hash={{vilynx_id}}&url={{content_url}}&type=pro.viwindow&format=mp4&token"/>

<meta name="twitter:player:stream:content_type" content="video/mp4; codecs=&quot;avc1.42E01E1, mp4a.40.2&quot;"/>

<!-- Open Graph data -->

<meta property="og:title" content="{{content_title}}" />

<meta property="og:type" content="video.episode" />

<meta property="og:url" content="{{content_url}}"/>

<meta property="og:image" content="https://www.vilynx.com/get_file.php?hash={{vilynx_id}}&url={{content_url}}&type=pro69.viwindow&format=jpg&token"/>

<meta property="og:video:url" content="https://www.vilynx.com/get_file.php?hash={{vilynx_id}}&url={{content_url}}&type=pro69.viwindow&format=mp4&token" />

<meta property="og:video:type" content="video/mp4"/>

<meta property="og:video:width" content="640"/>

<meta property="og:video:height" content="360" />

<meta property="og:description" content="{{content_description}}" />
 <meta property="og:site_name" content="{{site_name}}" />

<meta property="og:rich_attachment" content="true" />

<meta property="og:see_also" content="{{site_url}}"/>
  • {{vilynx_id}} Vilynx owner ID. Example: 14ce449ceb70a3859bd19eb20c6823d8. You can get your owner ID by going to your Vilynx Dashboard and clicking on: Settings / Owner Gallery ID

  • {{content_url}} Link to video content. Example: https://www.gridv.com/watch?v=Zoj2mJWlKUk.

  • {{content_title}} Title. Example: It’s Aladdin.

  • {{content_description}} Content description. Example: Hey everybody, it’s Aladdin! That guy with all the wishes!.

  • {{twitter_username}} Title. Example: It’s Aladdin.

  • {{site_name}} Site name. Example: GridV.

  • {{site_url}} Site URL. Example: http://www.gridv.com.

Note that you’ll have to register your Twitter card to use this feature. If you haven’t done this before for your domain you can do it here: https://cards-dev.twitter.com/validator

PROS

  • The post shows the video summary

  • Sharing the URL shows also the video summary

CONS

  • Your metadata can only describe one video in your page

2. Gallery Share widget

If you are using the Vilynx Gallery in your web site you can also activate the share widget, this provides a sharing interface on top of your video content. See this example below:

To activate this option you just have to pass this parameter to the Gallery script: sharewidget="true". There's an example below and you can get more information about it in the Gallery section.

<script src="http://static.vilynx.com/gallery/vpg.3.0.1.min.js" sharewidget="true" externalid="true" userid="youruserhash" autoadjust="true"></script>

PROS

  • You can have more than one video in your page and share each link with its own details

  • Users are two clicks away from sharing your content

CONS

  • Your post does not show the Vilynx summary unless your video landing page has the matadata added as described in the previous sections.

3. Share metadatas

This last option also uses the Vilynx Gallery share widget but provides the metadata needed to show the 5-sec preview in the post.
Add this parameter to your Gallery script configuration, sharemetas="true":

<script src="http://static.vilynx.com/gallery/vpg.3.0.1.min.js" sharewidget="true" sharemetas="true" externalid="true" userid="youruserhash" autoadjust="true"></script>

PROS

  • You can have more than one video in your page and share each link with its own video summary

  • Users are two clicks away from sharing any video content

  • Posts show the Vilynx summary without editing metadatas in your page


For publishers

Once you have videos uploaded to your Vilynx acount you can share them by posting its video preview. Let's see how:

Go to your Vilynx Dashboard, follow these steps:

Select your video / Press > / Social

In this menu you have two options available:

a. Download the summary

Downloading the video preview to your device it's useful to upload it later to any social network you want. Besides, there's a link you can use to get your summaries faster:

https://www.vilynx.com/get_file.php? hash={{vilynx_id}}&url={{content_url}} &type=pro69.viwindow&format=mp4&token
b. Share through webapp

If you want a quick share on the social networks listed just click on its icon.


Download documentation

If you want to review all this offline you can download this guide in PDF format:

Download it

Contact us

We'll be glad to help you

For more information about the integration of our products contact us: