What you’ll need:
- An internet connection
- Ensemble web url and playlist/category IDs
Copy and Paste the following code between the HEAD tags in your web page:
* if you do not have access to the HEAD tag, then you can put these lines directly in the body.
These lines import the CSS and JS files that you will need to run this widget. Here we also call the plugin. There are many configuration options to choose from to make sure you get the content you want and display it how you like.
Copy and paste the following into the BODY tag where you want the video grid to appear.
We do suggest you download the widget files and reference them locally on your web server. This will decrease load time and give you more control over the widgets. Click the link below to download the scripts, images, styles and examples.
Click to Download Widgets (160 KB)
|appRoot||string||‘http://cloud.ensemblevideo.com/ app’||The HTTP path to your Ensemble Web Application. This points to our cloud server as a default. Just change it to point to your instance of Ensemble Video to start pulling your videos!|
|autoPlay||boolean||false||When videos load, start playing them without having to click Play.|
|categoryID||string||null||A categoryID from Ensemble Video that will limit results to one, specific category.|
|columns||integer||3||The number of columns to divvy up the videos returned|
|idPrefix||string||‘grid’||This is the prefix of the HTML ID attribute that gets generated for each thumbnail. Setting this can help avoid ID conflicts in the DOM; especially if you have more than one widget loading in the page.|
|playlistID||string||’4M2akAsn2EGhYH9edW8YSA’||This points to our cloud server, and references the videos that we use for promotion and training. Feel free to leave this as is for testing, but be sure to change it to your playlist when going LIVE!|
|resultsCount||integer||9||The total number of videos you want to return in the video grid.|
|sortBy||string||‘videoDate’||Sorts the output by any Ensemble Simple API parameter.|
|sortOrder||string||‘desc’||Sorts the direction by standard commands. ‘asc’ or ‘desc’.|
|thumbnailWidth||string||’150′||Width, in pixels, of each thumbnail in the grid. NOTE: if you change this, some CSS adjustments may be required.|
|videoDetailsLinkClass||string||‘videoLink’||This controls the class of the video details link. It can be used for styling or customization of it’s action.|
|videoDetailsPage||string||null (opens in the current page)||This specifies an outside page that these thumbnails will link to. The default is to open a window in the current page to display the video and it’s metadata.|