Videofy your website.

Create a living and exciting video website around your videos using VideofyMe's powerful and easy to use tools.

Do you have input on how we should extend and improve our tools for developers? Send us some feedback.

Widgets.

Give your videos a longer life by integrating video widgets on your website. Choose between sidebar widgets, Web-TV widgets and more and customize them to your liking.

Plugins.

We have plugins for Wordpress to make it easier to work with VideofyMe on your website.

Javascript.

Using our Javascript SDK you can easily integrate uploading, widgets and WebTV players in your website or blog.

RSS and video tags.

Use the plain and simple RSS feeds together with our video tags to get a list of a users recent videos and create your own layout around them.

Javascript SDK Documentation.

Including the SDK.

Ever heard of a <script> element? Good. Use it. The URL is http://sdk.cdn.videofy.me/javascript.js

Sample – Include the SDK.

<script src="http://sdk.cdn.videofy.me/javascript.js"></script>

The object.

All methods and classes exposed as the VideofyMe JS SDK is inside the object named VideofyMe.

Sample – The object.

// your code...
VideofyMe.Embed;
VideofyMe.Widget;
VideofyMe.WebTV;
// more code...

Methods.

Every method is actually a JavaScript class that needs to be instantiated. This is done using the new keyword, as illustrated in the sample to the right. The first argument when creating an instance is always an options object.

Sample – How to use the SDK.

<script src="http://sdk.cdn.videofy.me/javascript.js"></script>
<script>
  var embed = new VideofyMe.Embed({
    // Insert options here
  });
</script>

The VideofyMe graphic.

To give your users a more consistent experience we recommend using the VideofyMe graphic for signaling an upload action. It is easy to add it to your page, just add a placeholder element containing the class videofyme-graphic-placeholder and include the SDK. Every instance found will then contain the image.

Sample – Adding a VideofyMe graphic link to your page.

<a href="#" class="videofyme-graphic-placeholder">Upload to VideofyMe</a>
<script src="http://sdk.cdn.videofy.me/javascript.js"></script>

Available methods.

VideofyMe.Embed

Creates a component for uploading videos within a popup. It will call a callback where you can use the embed code however you want. For example adding it to an editor or adding the video ID to a database.

Options.

Name Type Description
mode String Can be either 'container' or 'popup', where 'container' embeds an iframe in a specified on the host site. The 'popup' option opens a popup with window.open that is used instead. Note: If you're using 'container' the option 'container' must be specified (see below).
Default is 'popup'.
container Element or String The DOM element to add the embed iframe to. This option is only used if the mode is 'container'. If it is a string it is assumed to be an ID.
width String The width of the popup. Can be any valid style "100", "50px", "100%". Default is '700px'
height String The height of the popup. Default is '500px'
onReady Function A callback called when the embed is loaded and ready to use.
callback Function The callback that is called when a link has been generated.
The parameters that are sent to the callback is an info-object with the properties 'id', 'embed', 'flash' 'width' and 'height'. Please note that 'width' and 'height' might not always be present. The 'embed' and 'flash'-properties are the embed code and the old flash embed code.
params Object Other parameters that will be sent to the embed site. Currently available params are 'video_id', 'width' and 'height'

Sample – Upload a video and insert it without leaving the page.

<div id="video-container"></div>
<script src="http://sdk.cdn.videofy.me/javascript.js"></script>
<script>
// Open an embed popup and display the video in the video-container.
var embed = new VideofyMe.Embed({
  callback: function(video) {
    document.getElementById("video-container").innerHTML = video.embed;
  }
});
</script>

Sample – Insert the upload window on the current page.

<div id="embed-container"></div>
<div id="video-container"></div>

<script src="http://sdk.cdn.videofy.me/javascript.js"></script>
<script type="text/javascript" language="javascript">
// Create an embed popup within the page and show the selected video in video-container.
var embed = new VideofyMe.Embed({
  mode: "container",
  container: "embed-container",
  callback: function(video) {
    document.getElementById("video-container").innerHTML = video.embed;
  }
});
</script>

Methods.

.remove()
Removes the popup. Will be called automatically if a code has been received.

Sample - Removing embed directly after creation.

<script src="http://sdk.cdn.videofy.me/javascript.js"></script>
<script>
var embed = new VideofyMe.Embed({
  mode: "popup",
  callback: function(video) {
    alert("will not be called");
  }
});
embed.remove();
</script>

VideofyMe.Widget

Embed a VideofyMe widget onto your page. Customization includes size and type. See options for more details.

If you only want to embed a widget on your page you can use the widget designer to generate the embed code directly.

Options.

Name Type Description
user String The user whose widget should be displayed.
container Element or String The DOM element to add the widget iframe to. If it is a string it is assumed to be an ID.
Note: If no container is specified it will be written with document.write.
width String The width of the widget. Can be any valid style "100", "50px", "100%". Default is '200px'
height String The height of the widget. Default is '400px'

Methods.

.remove()
Removes the widget.

Sample – Default widget.

<script src="http://sdk.cdn.videofy.me/javascript.js"></script>
<script>
// Write out the default widget with document.write
new VideofyMe.Widget({
  user: "foki"
});
</script>

Sample – 200x500 widget.

<div id="widget-container"></div>
<script src="http://sdk.cdn.videofy.me/javascript.js"></script>
<script>
// Write out the default widget with document.write
new VideofyMe.Widget({
  user: "foki",
  container: document.getElementById("widget-container"),
  width: "200px",
  height: "500px"
});
</script>

VideofyMe.WebTV

Embed a VideofyMe WebTV widget onto your page. Customization includes size and type. See options for more details.

Options.

Name Type Description
user String The user whose videos should be displayed.
container Element or String The DOM element to add the widget iframe to. If it is a string it is assumed to be an ID.
Note: If no container is specified it will be written with document.write.
width String The width of the widget. Can be any valid style "100", "50px", "100%". Default is '550px'
height String The height of the widget. Default is '300px'

Methods.

.remove()
Removes the widget.

Sample – Default WebTV.

<script src="http://sdk.cdn.videofy.me/javascript.js"></script>
<script>
// Write out the default widget with document.write
new VideofyMe.WebTV({
  user: "foki"
});
</script>

Back to top

RSS and video tags.

RSS and video tags are a great way get information about a particular video.

Each user has their own RSS feed which contains the latest uploaded videos. The URL is formed as follows: http://videofy.me/username.rss

Every video page has some meta data linked to it, you can use this to build services related to the user. Request the video URL, for example, http://www.videofy.me/foki/265163 and read the meta elements of the page. To the right are the available tags.

Available tags.

Name Description
image_src The video thumb image
title The title of the video
description Description about the blogger
video_height The height of the video, in pixels
video_width The width of the video, in pixels
og:url URL to the user on Videofy.me
og:title The title of the video
og:image The video thumb image
og:video:height The height of the video, in pixels

Back to top

TinyMCE plugin.

Do you have a blog or CMS system? Then you're most likely using a rich text editor built for the web. One widely used editor is TinyMCE. We have a plugin for it. With it, you can:

Add the Videofyme upload widget directly in your editor, and upload and publish without leaving your editor.

Tinymce

Installing the plugin

  1. Download the plugin: videofyme-tinymce-latest.zip
  2. Unzip it to the tinyMCE plugins directory: tiny_mce/jscripts/plugins/videofyme
  3. Include videofyme in the list of plugins
  4. Add the button to the toolbar
  5. Rock on

Adding it to the toolbar

<script>
tinyMCE.init({
    ...
    plugins: "videofyme",
    theme_advanced_buttons3_add: "videofyme"
});
</script>

Back to top