Plugin YouTube | |
|
Parameters | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Introduced in Tiki 2. Required parameters are in bold .Go to the source code Preferences required: wikiplugin_youtube
|
Show a video | |
This code: {youtube movie="G1TuB5P4Ypw" width="425" height="350" quality="high" allowFullScreen="y"}
|
Responsive YouTube video - activating fitvid.js for the Tiki website | |
Be careful for existing to be upgraded sites using already a number of media plugins with videos. An active fitvid.js will change the appearance of all standard youtube videos displayed by PluginYoutube or html iframe elements, if no additional wrapper classes / helper classes are applied (see here: https://tiki.org/forumthread59970). fitvid.js has a global effect on your Tiki website. Both of the two following plugins ... {youtube movie="G1TuB5P4Ypw" width="425" height="350" quality="high" allowFullScreen="y"} {youtube movie="G1TuB5P4Ypw" quality="high" allowFullScreen="y"}
Thx to chibaguy to point out the fitvid.js integration.
|
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.
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) whih you can name for examle .video-wrapper (se also below the Bootstrap section). 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()}
of CodeCascade from YouTube
Thx to Codecourse (video1) and CodeCascade (video2) from YouTube to explain the little hack.
|
Responsive YouTube video - Bootstrap helper classes and iframe element | |
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:
|
a. 16 : 9 ratio PluginYoutube | |
{DIV(class="embed-responsive embed-responsive-16by9")} {youtube movie="2c7pVXTGZSI" quality="high" allowFullScreen="y"} {DIV}
|
c. 4 : 3 ratio PluginYoutube | |
{DIV(class="embed-responsive embed-responsive-4by3")} {youtube movie="2c7pVXTGZSI" quality="high" allowFullScreen="y"} {DIV}
|
b. 16 : 9 ratio iframe | |
{HTML()}
|
d. 4 : 3 ratio iframe | |
{HTML()}
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"}
Tip Make sure you use the URL which looks like /v/wWmE6Zvo37E and not like watch?v=UmAfQ-GgtCQ |
Related pages | |