Web Development Documentation

Displaying a Video within an Article

• Select an article to edit following steps 1-3 of Editing Articles, 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)
  
  
• 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. 
• If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left.

Displaying a Video within a Custom Module

• Log on to your site using the Administrator Login URL.
• Click on "Extensions > Site Modules"
• Click on the Title of a "Custom" module to edit it, or follow steps 1 through 8 of Adding a Custom Module (Joomla! 4.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)
  
• Click the Options tab below the title of your module, and change Prepare Content to "Yes" (see #2 below).
  
  
• Click Save & Close to the upper left of the web page. 
• Your module will display the video as embedded content.

Advanced Options: Set height and width of embedded video

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