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:
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
inside the head tag{{youtubetv-css}}
Add
inside the head tag (*){{swipebox-css}}
Add
before the closing body tag (*){{swipebox-js}}
Add
where you want to display the Video Gallery[[multiTV? &tvName=`youtube` &display=`all`]]
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)