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

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

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/vilynx_gallery.min.js" externalid="true" userid="youruserhash" autoadjust="true"></script>
  • externalid="true" means that Vilynx will automatically discover videos on the page that matches an external video ID identified in the Vilynx database and replace the thumbnail with the Vilynx 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.

  • userid="youruserhash" is required when using external video ID. This is your user ID.

  • autoadjust="true" crops the video summary to fit any image aspect ratio.

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


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 normally 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 have two additional options. First one is to use the vilynx-id attribute. In this case the you can also modify the outer tag and use a <div> tag with the class vilynx_enabled. Take a look at this example:

<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> with its video preview.

The second options is to use a custom attribute where the Vilynx Gallery Library could check the your_ideo_external_id value. Note that using a custom attribute makes it necesary to set the id-attribute in your Villynx Gallery script definition (see line 4). In the next example the custom attribute is data-video-id:

<a href="link_url" data-video-id="your_video_external_id">
    <img />
</a>
<script src="http://static.vilynx.com/gallery/vilynx_gallery.min.js" id-attribute="data-video-id" externalid="true" autoadjust="true" userid="userhash" button="true"></script>

Note that jQuery is needed in order to use the Vilynx Gallery. If your web page doesn't already use jQuery you can use this source: <script src="https://code.jquery.com/jquery-2.1.1.js" />

Options

Several options can be passed through the script:

Name type default description
externalid boolean true Activates the auto-scan of URLs
userid string none Unique id to identify your Vilynx account
autoadjust boolean true Crops the video summary to fit any image aspect ratio
highres boolean true Activates high-resolution videos when the gallery item width is greater than 640px
sharewidget boolean false Show the social share links
sharemetas boolean false Activates the sharing of the intermediate page vilynx/share.php which includes the metas
button boolean true Adds a play icon to the summary
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)
spinner boolean true Activates the loading spinner
nolazy boolean false Use the lazy-load of the Vilynx divs
nomobile boolean false Deactivates the plugin in Mobile devices
mobilethumb boolean false Only a static thumbnail is shown in mobile devices
bgcolor HTML color transparent Changes the background color
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' When redirect is activated this is the text shown along with the countdown
hidediv string jQuery selector none Hides the div defined by the jQuery (selector) when playing the summary in mobile devices
hidealways boolean false Hides the div defined by hidediv in all devices
id-attribute string none Custom attribute to set the external_id values
optimizely boolean false Sends optimizely events to optimizely (note: it'll use the account registered in your domain). Check the Optimizely integration section

Here's an example:

<script src="http://static.vilynx.com/gallery/vilynx_gallery.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/vilynx_gallery.min.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/vilynx_gallery.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/vilynx_gallery.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: