YouTube Responsive videos Multitv for MODX Evolution

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:

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)

Instructions

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

Tips:

Create a Video ManagerManager tab

Add to your mm rules chunk:

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

Placeholders

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 : http://jako.github.io/multiTV/snippet.html

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', '', '');

Updates:

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)

Comments