Aimy Video Embedder PRO

Introduction

The Joomla! plugin Aimy Video Embedder allows you to embed any YouTube or Vimeo video into your articles.

You can easily customize the way the videos are embedded using different options.

This manual guides you through all steps necessary to install, configure and use the plugin to enrich your website.

Installation

The installation of the extension follows the common Joomla! procedures.

In case you are not familiar with these procedures proceed as follows:

1. Download the extension's ZIP archive
2. Log into your Joomla! backend as "Super User"
3. From the menu, choose "Extensions" → "Extensions Manager"
4. Click on the "Browse" button and select the ZIP archive
5. Click on the "Upload & Install" button

The extension's archive will be uploaded and installed afterwards.

For further information, please have a look at the Joomla! documentation Installing an Extension.

NOTE: All plugins are disabled by Joomla! when installed for the first time. To enable Aimy Video Embedder, proceed and configure the plugin.

Configuration

After a fresh installation, click on the "Configure plugin now" button on the installation report page.

At any time, you can configure the Aimy Video Embedder plugin using Joomla!'s Plugin Manager by choosing "Extensions" → "Plugin Manager" from the menu. Locate the plugin and click on its name in the "Plugin Name" column of the plugin listing.

Enabling the Plugin

In order to use the plugin's functionality, you have to enable it first.

To do so, change the plugin's status from "Disabled" to "Enabled" and apply your changes by clicking on either the "Save" or "Save & Close" button in the toolbar.

Setting Global Plugin Options

Responsive (PRO feature)

Aimy Video Embedder allows you to make all your embedded videos responsive with a single click. To do so, set "Responsive" to "On".

If enabled, the width you set for any video is considered its maximum width. On smaller devices that do not allow the video to be shown in its configured width, the video will be scaled down automatically, keeping its aspect ratio (4:3, 1:1 or 16:9) intact.

Setting Default Options for YouTube Videos

Aimy Video Embedder allows you the customize the way YouTube videos are embedded in a couple of ways.

NOTE: This configuration sets the default values. If you use Aimy Video Embedder in the PRO version, you may set individual options when embedding a video (see chapter 4.2).

Default Width

Allows you to set the default width of the video in pixels.

Default Height

Allows you to set the default height of the video in pixels.

Cookie-Free Embedding

Allows you to decide whether to embed YouTube videos requiring your users to accept cookies from youtube.com.

If you select "On", videos will be loaded cookie-free from youtube-nocookie.com by default, from youtube.com otherwise.

Hide Related Video Suggestions

Allows you to decide whether video suggestions should be displayed after an embedded video has finished playback.

Select "On" to hide video suggestions, "Off" to display them to your users by default.

Allow Fullscreen

Allows you to decide whether the embedded video should provide a button that enables your users to switch to fullscreen view.

Select "On" to include the button by default, "Off" to hide the button.

Setting Default Options for Vimeo Videos

Aimy Video Embedder allows you the customize the way Vimeo videos are embedded.

Default Width

Allows you to set the default width of the video in pixels.

Default Height

Allows you to set the default height of the video in pixels.

NOTE: This configuration sets the default values. If you use Aimy Video Embedder in the PRO version, you may set individual options when embedding a video (see chapter 4.2).

Embedding Videos

Aimy Video Embedder allows to embed videos from YouTube and Vimeo in Joomla! articles using simple and intuitive markup.

To embed a video from either service, first obtain its video id.

You find the video id as the value of the v parameter at the end of the video's YouTube URL.

Example: http://www.youtube.com/watch?v=EIiSElG9JqA (with "EIiSElG9JqA" being the video id).

Vimeo uses a numeric code which is visible at the end of each video's URL.

Example: http://vimeo.com/7427808 (with "7427808" being the video id).

Markup

Within Joomla!'s "Edit Article" view enclose the id of the video you like to embed in opening and closing markup matching the service's name, that is {YouTube} and {/YouTube} or {Vimeo} and {/Vimeo}.

For example:

  {YouTube}EIiSElG9JqA{/YouTube}

or:

  {Vimeo}7427808{/Vimeo}

The markup and video id will be processed as soon as Joomla! starts generating the document's view on a request and invokes the Aimy Video Embedder plugin. For each video, an HTML "iFrame" element will be generated to embed the video for the service with the chosen options.

Individual Settings (PRO feature)

You can set individual options per video when embedding one.

For example:

  {YouTube fullscreen=0}EIiSElG9JqA{/YouTube}

or:

  {Vimeo width=400, height=400}7427808{/Vimeo}

Each option is separated by a comma. The following options are available:

width and height

Define the video's size with pixels e.g. height=400

autoplay

This option defines whether the video should start immediately or if the user has to click play. Turn this option on (1) or off (0) e.g. autoplay=0

cookie-free embedding (YouTube)

Turn this option on (1) or off (0) e.g. no-cookie=0

hide-related video suggestions (YouTube)

Turn this option on (1) or off (0) e.g. hide-related=1

allow fullscreen (YouTube)

Turn this option on (1) or off (0) e.g. allow-fullscreen=0

Advanced Configuration

Styling the Container

Every video Aimy Video Embedder embeds on your website is wrapped in a div HTML element that has a class of "AimyVideoEmbedderVideo" assigned.

A trimmed HTML example snippet looks like this:

  <div class="AimyVideoEmbedderVideo">
    <iframe width="440" height="320" ...></iframe>
  </div>

You can style the container using standard CSS to meet your requirements. Browse to "Extensions" → "Template Manager" → "Templates" → Your Template and extend your template's CSS code, for example:

  #content div.AimyVideoEmbedderVideo
  {
      text-align: center;
  }

Copyright & Trademark Notice

The Joomla!® name and logo are trademarks of Open Source Matters, Inc. in the United States and other countries.

YouTube™ is a trademark of Google Inc. in the United States and other countries.

Vimeo™ is a trademark of Vimeo LLC in the United States and other countries.

Mentioned hard- and software as well as companies may be trademarks of their respective owners. Use of a term in this manual should not be regarded as affecting the validity of any trademark or service mark. A missing annotation of the trademark may not lead to the assumption that no trademark is claimed and may thus be used freely.