Web Development Documentation

Displaying a Video Within an Article or Module (Joomla! 3.x)

The AllVideos plugin allows you to display a video within an article or module and have it play directly on your web site.

If you would like to use this feature, but do not have the plugin installed, please SUBMIT REQUEST to request us to install the AllVideos plugin for your department.

Uploading the Video

This procedure assumes the video has already been uploaded to YouTube.  You will need the URL for the video in order to proceed. 

Displaying the Video

Displaying a Video within an Article

  • Select an article to edit following steps 1-3 of Editing Articles (Joomla! 3.x), or create a new article.
  • Click somewhere within the Content text box and type or paste the YouTube URL for the video you want to display.
  • If the URL is shown as a hyperlink, highlight it, then click the Unlink button (see #1 below)
  • Enter the code "{ youtube }" (without spaces or quotation marks) before the YouTube URL (see #2 below)
  • Enter the code "{ /youtube }" (without spaces or quotation marks) after the YouTube URL (see #3 below)

    Embedding a YouTube video using AllVideos
  • If you are editing the article from the front end of the web site, click the Save button to save your changes.
  • If you are working in the Joomla! Administrator, to save your changes and continue editing the article, click the Save button to the upper left:  Save button
  • If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left: Save & Close button

Displaying a Video within a Custom Module

  • Log on to your site using the Administrator Login URL.
  • Click on "Extensions > Modules":

    Youtube Link2

  • Click on the Title of a "Custom" module to edit it, or follow steps 1 through 8 of Adding a Custom Module (Joomla! 3.x) to create a new Custom HTML module.
  • Click somewhere within the Module text box and type or paste the YouTube URL for the video you want to display.
  • If the URL is shown as a hyperlink, highlight it, then click the Unlink button (see #1 below)
  • Enter the code "{ youtube }" (without spaces or quotation marks) before the YouTube URL (see #2 below)
  • Enter the code "{ /youtube }" (without spaces or quotation marks) after the YouTube URL (see #3 below)
    Embedding a video within a module using AllVideos
  • Click the Options tab below the title of your module, and change Prepare Content to "Yes" (see #2 below).

    Custom module options: Prepare COontent
  • Click Save & Close to the upper left of the web page: Save & Close button
  • Your module will display the video as embedded content.

Advanced Options: Set height and width of embedded video

Note: If AllVideos is set to "Responsive" mode, the following parameters may not work.

You can add parameters (separated by pipes: "|") after the video URL or video ID to control the width and height of the embedded video. 

{ youtube }VideoID|560|315{ /youtube }    (Note:  Remove spaces surrounding "youtube" and "/youtube".)

  • 560 = width of embedded video will be 560px
  • 315 = height of embedded video will be 315px

You can also use percentages in place of pixel values:

e.g. { youtube }VideoID|100%|400{ /youtube }    Note:  Remove spaces surrounding "youtube" and "/youtube".

  • 100% = width of embedded video will be 100% of the available space
  • 400 = height of embedded video will be 400px

Sample Video Display

Once you have embedded the video in your article or module, it will look something like this: