Multiple YouTube Videos

Adding multiple videos to a page

There are a number of options available to you if you want to add multiple YouTube videos to a page, with content types that will display 3, up to 5, and up to 7 videos.  There's also a way to show any number of videos on a single page, (if you're willing to edit some code).  See below for full details:

Adding 3 videos

Use the 'interactive video gallery' content type.  
Note: Specify the videos unique code in the YouTube ID field (e.g. 7OoU3Go2Ed8) - do not enter its full web address.

To add an Interactive Video Galway to your web pages:

1. Add the Content Type 'Interactive Video Gallery'. This content type needs exactly 3 videos to be added to it.
2. Fill in the information for each video you are using.
3. The video ID will be located in the URL of the video page, browse to the video in YouTube – you’ll see the id in the address bar.  E.g. if it says youtube.com/watch?v=QRaACa1Mrd4, then the id is the last bit after v=: QRaACa1Mrd4. (Similarly, if the web address format is https://youtu.be/QRaACa1Mrd4, you can still easily pick out what the code is.)
4. Images should be at a ration of 3:2, recommended dimensions 1200x800px and a minimum size of 680x453
5. To ensure your images are web ready, see How to make your images web ready.

Adding Up To 5 Videos

1. Add a 'YouTube Videos (multiple)' Content Type to your page and give it a name.
   This controls where the video block will appear.
   Note:  Skip this step if the section contains a 'Course Template 1' or 'Course Template 2' content type.
2. Create a sub-section called 'Video'
3. In the 'Video' subsection, add a 'Course Video' content type.
4. Give it a Name.
5. Thumbnail width should be 200 and height should be 150
6. In the field labelled 'You-tube address', you need to enter the web address of a YouTube video.  It just requires the youtube links in the format http://www.youtube.com/watch?v={VIDEO_ID}. 
7. Add a caption
8. Repeat the steps for any additional videos up to 5 YouTube videos.

Adding exactly 7 Videos (and/or images)

Another way to add multiple videos is to use the 'Standard Media Gallery'.  This CT allows you to add 7 items which can be videos or images, when clicked on they will open in a lightbox.

Recommended image dimensions are:

First thumbnail: 584 x 584 
Other thumbnails: 288 x 288
Full-Sized images: 800 x 600

1. Add the content type 'Standard Media Gallery'
2. Add a Thumbnail image for each item
3. Add Full Size Image for each image you want to display. i.e. as in the example below, items 2, 3, 4, 6 and 7 are images so a Full Size Image has been added to the corresponding field.
4. or Add The video link for each video you wish to display. i.e. as in the example below, items 1 and 5 are videos so only the corresponding Video link field has been populated.
5. Add a Description for each item
6. Add a CTA Label which will display below the items.  In this example 'SEE MORE OF UNIVERSITY OF GALWAY'.

Adding any number of videos

There's a custom piece of code in a 'NUIG Code Only' content type, called 'Shared Video Viewer' in NUI Galway » training » Training Examples » Multiple YouTube Videos. 
This can be duplicated to another page and easily modified to link to as many videos as you want.  You'll just need to specify the colour of each link, the YouTubeID, and the clickable text for each link you want to add.  Below is an example:

1. Go to the Multiple YouTube Videos section in the Training Examples
2. Click on the Actions button beside the Shared Video Viewer content
3. Click on Duplicate - a Duplicate content pop up will appear.  Click on the section of your website where you want the content to appear.  Be careful not to click on any other section.
4. Go to the section you copied the content to and click into Shared Video Viewer
5. Within the code scroll down to the video links and replace the Video ID reference to your own video ID references and amend the title you want to appear on the button (see example below, only amend the bolded information below). 
   <div class="slimLink teal"><a href="javascript:watch('oih8x75DjDc');">Welcome message</a></div>