YouTube Responsive videos Multitv for MODX Evolution

YouTube Multitv for MODX Evolution
EVO Version: Evolution 1.0 or above
Required Extras: MultiTV Snippet

Youtube Responsive video Multitv for MODX Evolution

YouTube Multitv is a MODx Evolution MultiTV to embed responsive Youtube videos in MODx Evolution Templates.

Multitv Options:

youtube multitv fields

Title : video title (optional)

Youtube video id: (ie 4LqHw8pGBfQ)

Video or Thumbnail: Display Embed video or Thumbnails with video in a Swipebox window (with gallery feature)

Thumbnail Size: maxresolution/default (added in RC 1.1 because some old youtube videos does not have Max res thumbnails)

Ratio: Video Aspect Ratio (16:9 or 4:3)


1) Install with Evolution Package Manager

2) Go to Template Variables > youtube > Template Access > Select your default template

3) Edit your default template:

Add {{youtubetv-css}} inside the head tag

Add {{swipebox-css}} inside the head tag (*)

Add {{swipebox-js}} before the closing body tag (*)

Add [[multiTV? &tvName=`youtube` &display=`all`]] where you want to display the Video Gallery

4) Edit a resource and use the multiTV to add videos

(*) If you don't use thumbnails or If you have installed SwipeBoxMG Multitv for Boostrap you don't need this step


Create a Video ManagerManager tab

Add to your mm rules chunk:

mm_createTab('Videos','videoTab', '', '', '', '800');
mm_moveFieldsToTab('youtube', 'videoTab', '', '');


Adding Multitv parameter &toPlaceholder=`` ie: [[multiTV? &tvName=`youtube` &display=`all` &toPlaceholder=`video`]]

the multitv output is assigned to a placeholder named as the parameter value (i.e. [+video+]),
single items are assigned to placeholders named as the parameter value followed by the row number (i.e. [+video.1+]).

Check MultiTv Snippet documentation at :

Placeholders Tv

( fast switch to "Placeholder mode")

1) Assign the VideoPlaceholders TV to your template

For manual install: Create a VideoPlaceholders TV

  • Name: VideoPlaceholders
  • Caption: Use Placeholders?
  • Description: Allow use [+video+] to display all videos, or [+video.1+],[+video.2+].. to display single video
  • Type: Dropdown
  • Input: no==0||yes==1
  • Default value: no
  • Assign to your template

2) Use IF Snippet to call Youtube Multitv into your template:

[!if? &is=`[*VideoPlaceholders*]:is:yes` &then=`[[multiTV? &tvName=`youtube` &display=`all` &toPlaceholder=`video`]]` &else=`[[multiTV? &tvName=`youtube` &display=`all`]]`]]   

3) MM Rules

mm_createTab('Videos','videoTab', '', '', '', '800');
mm_moveFieldsToTab('VideoPlaceholders,youtube', 'videoTab', '', '');

placeholder tv


1.3 RC

  • New default CSS Stylesheet youtubetv-responsive.css includes embed responsive classes and works with any template (no more only for Bootstrap 3.2)
    (previous Stylesheet youtubetv.css, without responsive classes, it's still available inside the package)

1.2 RC

  • added VideoPlaceholders tv into the package

1.1 RC

  • CSS Stylesheet youtubetv.css : Overlay Styles for Video Thumbnails
  • New parameter Thumbnail Size: maxresolution/default (added because some old youtube videos does not have Max res thumbnails)