Videos and Video Playlists

It’s easy to embed either a single video or a YouTube video playlist onto a webpage.

Single videos

To embed a video, simply select “Insert > Video/Media” from the CMS toolbar,

Paste the video URL (usually YouTube or Vimeo) into the resulting overlay:

… and you’re all set. 

Embedding a video playlist

In addition to single videos, YouTube playlists can be added to your pages using the MyList Video Player plugin.

This plugin allows you to put YouTube playlists on your pages, and automatically creates a video carousel from the videos in your playlist.

The current implementation allows you to put up to three playlists on a single webpage. There are different instructions for placing ONE playlist (simple) and 2-3 playlists (a little more involved but still straightforward).

There are two components to the process: adding the video-playlist theme (which loads the CSS and Javascript files needed for the plugin) and adding a file include widget with the ID of your playlist as a variable.

The ID of your playlist can be seen in the YouTube URL:

https://www.youtube.com/playlist?list=PLTK4FMWnZKUxUU5BYa83O6ILNhaA6ubuL

In the code below, add the playlist ID wherever you see PLAYLIST-ID.

PLACING ONE PLAYLIST

1. Add this code to the HTML of an editable area:

<xphp var=”theme”>video-playlist</xphp>
<widget type=”file”><arg id=”path”>/_i/includes/video-playlist.php?playlist=PLAYLIST-ID</arg></widget>


PLACING MULTIPLE PLAYLISTS

When you’re adding more than one playlist, you may need to put them in different places on the page, perhaps with introductory text etc, so there’s a bit of code to embed for each one.

1. Add this code to the HTML of an editable area where the FIRST playlist should appear:

<xphp var=”theme”>video-playlist</xphp>
<widget type=”file”><arg id=”path”>/_i/includes/video-playlist.php?playlist=PLAYLIST-ID&playlist2=PLAYLIST-ID</arg></widget>


Note that there are two PLAYLIST-ID’s in the file widget include:
?playlist=PLAYLIST-ID&playlist2=PLAYLIST-ID

2. Add this code where the SECOND playlist should appear:

<widget type=”file”><arg id=”path”>/_i/includes/video-playlist-2.html</arg></widget></div>

A third playlist can be added as well, using the same method.


A NOTE ABOUT THEMES:

LiveWhale pages can have only one theme at a time (besides the “global” theme which is applied to all site pages). If you’re using this on a page that is already using a theme besides “global,” then you’ll need to point to the CSS and JS files of the theme directly rather than attaching the theme.

Questions? Drop us a line.