Home ▻ T4 Training▻Training▻Training Examples▻Interactive Video Gallery

Interactive Video Gallery

Item 1 - Author Heading Subtitle
Item 2 - Author Heading Subtitle
Item 3 - Author Heading Subtitle

 

Interactive Video Gallery

The Interactive Video Gallery looks best on a Widescreen or Ultra Widescreen page. To add an Interactive Video Gallery to your web pages you will need the YouTube ID of the video you want to add. The embed code from YouTube looks like this:

  • Full embed code: <iframe width="560" height="315" src="https://www.youtube.com/embed/lCzCHS7QGd8?si=mIlYrG3Em8Ns4dpi" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  • The part you need for Interactive Video Gallery content - The YouTube ID taken from the code above is lCzCHS7QGd8

The images you use need to be stored on your computer and should not exceed 1200px wide 800px in height. For instructions on how to create web-ready versions of images (that are the correct dimensions), see How to resize your image and make it web ready.

You need to fully comply with copyright law. Ensure that you have the right to use any images you upload or insert onto your webpage. Further information is available on our Images FAQ page - Where can I find Images to use on my website.

Tip: Make sure the filename does not contain any spaces, and the file name has at least 3 characters (before the dot) or it might not upload. Also, remove any characters that are reserved for web addresses ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ) or you may not be able to browse to the file once it's uploaded. 

How to add an Interactive Video Gallery to your page

  1. Go to the section where you want to add the 'Interactive Video Gallery'
  2. Click on the Actions button and choose Edit section
    Actions Button
  3. Click on +Add content
    Add Content button
  4. Add the 'Interactive Video Gallery' content type to your section
  5. Give the content a Name
  6. Add the You Tube ID for Item one in the Item1: YouTube ID field
  7. For the Item1: Image click on the Drop file here or click to choose and you will choose from an image saved on your computer (rec 1200x800px and no smaller than 680x453px)
  8. The fields Item1: Author, Item1: Heading and Item1: Subtitle are not required but you can fill them in if you want them to appear on the content.
  9. Repeat steps 5 to 7 for Item2 and Item3
  10. Click Save changes to put your content on Pending
    Save changes button. No option to save and approve or save as draft..
    Or else,
    Click on the small white arrow and click Save and approve to approve your content
    T4's Save and approve option, selected

See how this content type looks in different page types:
With Rightbar, Without Rightbar, Widescreen, and Ultra-Wide (sub-site) / Ultra-Wide (top-level) pages
or else
Normal, Widescreen, and Ultra-Wide (Sub-Site) / Ultra-Wide (Top-Level) Landing pages

Note: You change a page's width (and other options) using its section's DC.Keywords field - see the interactive demonstration for full information.