Plugin YouTube

This wiki plugin is 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.

Parameters

Embed a YouTube video in a page
Introduced 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:

Copy to clipboard

{youtube movie="G1TuB5P4Ypw" width="425" height="350" quality="high" allowFullScreen="y"}

Would produce:

Responsive YouTube video - activating fitvid.js for the Tiki website

Since Tiki 15.1 fitvid.js is integrated and cn be activated in the control center (admin panel) in the Features section in Tab Interface.

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 ...

Copy to clipboard

{youtube movie="G1TuB5P4Ypw" width="425" height="350" quality="high" allowFullScreen="y"}
{youtube movie="G1TuB5P4Ypw" quality="high" allowFullScreen="y"}

... will be displayed in 100% width and responsvely ignore the absolute settings for width and height or standard values

Thx to chibaguy to point out the fitvid.js integration.

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.

Responsive YouTube video - Using bootstrap classes

Since Tiki25 we use Bootstrap5 to manage themes, responsive design and CSS in Tiki.

Bootstrap5 use the "ratio" class, a generated pseudo elements, to make an element maintain the aspect ratio this allow responsively handling video that embeds based on the width of the parent element.

Example with Bootstrap5 classes

Copy to clipboard

&lt;div class=&quot;ratio ratio-16x9&quot;&gt;
...

&lt;/div&gt;

See: https://getbootstrap.com/docs/5.0/helpers/ratio/

__

This is a basic explanation how it works. For productive use, you do not need custom CSS. Simply use the Bootstrap classes .embed-responsive and .embed-responsive-16by9 or .embed-responsive and .embed-responsive-4by3 instead of the one custom class .video-wrapper - see Boostrap section below__

Bootstrap helper classes and iframe element

A much 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:

Copy to clipboard

&lt;!-- 16:9 aspect ratio --&gt;
&lt;div class=&quot;embed-responsive embed-responsive-16by9&quot;&gt;
  &lt;iframe class=&quot;embed-responsive-item&quot; src=&quot;...&quot;&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 4:3 aspect ratio --&gt;
&lt;div class=&quot;embed-responsive embed-responsive-4by3&quot;&gt;
  &lt;iframe class=&quot;embed-responsive-item&quot; src=&quot;...&quot;&gt;&lt;/iframe&gt;

&lt;/div&gt;

getbootstrap.com:
"Rules are directly applied to iframe, embed, video, and object elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes. (src: getbootstrap.com)"

a. 16 : 9 ratio PluginYoutube

''This code ..."

Copy to clipboard

... will show this video

c. 4 : 3 ratio PluginYoutube

''This code ..."

Copy to clipboard

... will show this video

b. 16 : 9 ratio iframe

''This code ..."

Copy to clipboard


    
        
        
                    Plugin execution pending approval
        
    
    
                    This plugin was recently added or modified. Until an editor of the site validates the parameters, execution will not be possible. You are allowed to:
                            
                    View arguments
                                                        
                                                                        View Details
                
                    Details: HTML
                                            This plugin does not contain any arguments.
                    
                                            
                            
                                Body
                            
                            
                                <div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/2c7pVXTGZSI" allowfullscreen="y"></iframe>
</div>

... will show this video

d. 4 : 3 ratio iframe

''This code ..."

Copy to clipboard


    
        
        
                    Plugin execution pending approval
        
    
    
                    This plugin was recently added or modified. Until an editor of the site validates the parameters, execution will not be possible. You are allowed to:
                            
                    View arguments
                                                        
                                                                        View Details
                
                    Details: HTML
                                            This plugin does not contain any arguments.
                    
                                            
                            
                                Body
                            
                            
                                <div class="embed-responsive embed-responsive-4by3">
<iframe src="https://www.youtube.com/embed/2c7pVXTGZSI" allowfullscreen="y"></iframe>
</div>

... will show this video

Thx to luciash d'being (aka luci) to point out the option to use the Bootstrap helper classes!

Responsive YouTube video - Custom CSS and Wrapper

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):

Copy to clipboard

.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 ...

Copy to clipboard

{DIV(class=video-wrapper)}
{youtube movie="Dm0YnuQeROI" quality="high" allowFullScreen="y"}
{DIV}

... will show this video

of Codecorse from YouTube

This code ...

Copy to clipboard

{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.

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:

Copy to clipboard

{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

Plugin YouTube

Parameters

Show a video

Responsive YouTube video - activating fitvid.js for the Tiki website

Responsive YouTube video - Using bootstrap classes

a. 16 : 9 ratio&nbsp;PluginYoutube

c. 4 : 3 ratio&nbsp;PluginYoutube

b. 16 : 9 ratio&nbsp;iframe

Plugin execution pending approval

Details: HTML

Body

d. 4 : 3 ratio&nbsp;iframe

Plugin execution pending approval

Details: HTML

Body

Responsive YouTube video - Custom CSS and Wrapper

a. Custom CSS

b. Wrapper

Show a playlist

Related pages

a. 16 : 9 ratio PluginYoutube

c. 4 : 3 ratio PluginYoutube

b. 16 : 9 ratio iframe

d. 4 : 3 ratio iframe