History: PluginYouTube
Preview of version: 41
Plugin YouTube
Introduced in Tiki2
This wiki plugin is an adaptation of the PluginFlash used to embed a youtube video on a wiki page. To display a play list of videos, you should use instead: Module last_youtube_playlist_videos.
Table of contents
Parameters
Embed a YouTube video in a pageIntroduced in Tiki 2. Required parameters are in
bold.Go to the source code
Preferences required: wikiplugin_youtube
| Parameters | Accepted Values | Description | Default | Since |
|---|---|---|---|---|
movie |
url | Complete URL to the YouTube video or last part (after www.youtube.com/v/ and
before the first question mark) |
2.0 | |
start |
digits | Start time offset in seconds | 0 | |
height |
digits | Height in pixels Default :350 |
350 | 2.0 |
privacyEnhanced |
(blank) y n |
Enable privacy-enhanced mode | ||
width |
digits | Width in pixels. Default :425 |
425 | 2.0 |
allowFullScreen |
(blank) y n |
Enlarge video to full screen size | 5.0 | |
background |
Toolbar background color. Use an HTML color code. Example: ffffff |
6.1 | ||
border |
Toolbar border colors. Use an HTML color code. Example: ffffff |
6.1 | ||
quality |
(blank) high medium low |
Quality of the video. Default is high. |
high | 2.0 |
related |
(blank) y n |
Show related videos (shown by default) | 6.1 |
Note : You can add using the url parameters a lot more of parameters like autoplay, show control, etc. Complete list at Youtube
Show a video
This code:
{youtube movie="G1TuB5P4Ypw" width="425" height="350" quality="high" allowFullScreen="y"}
Would produce:
You can also use the plugin FLASH PluginFlash to be able to use more parameters.
Responsive YouTube video - Custom CSS and Wrapper
For Tiki sites after v.12, respectively post Tiki12 Bootstrap based responsive websites, you want to show your videos responsive with the same effect that the class img-responsive has for images. Sadly width=100% and height=auto does not work for videos, as they are embedded with an iframe. Technically the PlugiYoutube is an alias for an embedding iframe and thus the trick works aswell for plain HTML as for the WikiSyntax / WikiPlugin as shown below.
Here is the trick:
a. Custom CSS
You need to add a little bit of CSS code to your website, either to your theme (in the themes directory on the server) or to the Look and Feel custom css area in the Tki admin control center (tiki-admin.php?page=look):
.video-wrapper { position: relative; padding-bottom: 56.25%; padding-top: 10px; overflow: hidden; } .video-wrapper iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
b. Wrapper
You need to wrap either your PluginYoutube or your original embedding iframe into a simple div element with the responding class (see above) video-wrapper. Mind to not use width and height neither in the original embedding code iframe nor in the PluginYouTube:
Apparently the PluginYoutube and the HTML iframe element do handle the ratio differently (4:3 / 16:9), but still both are responsive.
This code ...
{DIV(class=video-wrapper)} {youtube movie="Dm0YnuQeROI" quality="high" allowFullScreen="y"} {DIV}
... will show this video
of Codecorse from YouTube
This code ...
{HTML()} <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/PL_R3zEjqEc" frameborder="0" allowfullscreen="y"></iframe> </div> {HTML}
... will show this video
of CodeCascade from YouTube
Thx to Codecourse (video1) and CodeCascade (video2) from YouTube to explain the little hack. Maybe we will add this CSS hack as a parameter or preference or default css to Tiki at some time.
Responsive YouTube video - Bootstrap helper classes and iframe element
A maybe more straightforward solution when using an iframe, but not compatible with the PluginYoutube would be the use of the Bootstrap helper classes embed-responsive, embed-responsive-XbyY and embed-responsive-item. Here you wrap the item aswell in a div element, but you use the existing (integrated in Tiki) Bootstrape classes.
The advantage is that you completely omit custom css, but the drawback is the (status Tiki17) missing possibility to use this option with the PluginYoutube, as currently the iframe itself needs to have the class embed-responsive-item.
This is the original example from getbootstrap.com:
<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
Mind: Rules are directly applied to iframe, embed, video, and object elements. You can optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes. (src: getbootstrap.com)
Thx to luciash d'being (aka luci) to point out the option to use the Bootstrap helper classes!
Show a playlist
For example, to embed a YouTube playlist, can use the Module last_youtube_playlist_videos.
Or you can get the embed URL from YouTube, remove the "PL" at the front of the video ID, then in Tiki editor, click the "flash" icon, select Flash Type: Movie URL, then enter the URL as http://www.youtube.com/p/25DD9663EE128030:
{flash type="url" movie="http://www.youtube.com/p/25DD9663EE128030"}
/v/wWmE6Zvo37E and not like watch?v=UmAfQ-GgtCQ