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

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:

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

{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

<div class="ratio ratio-16x9">
...
</div>

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

{DIV(class="embed-responsive embed-responsive-16by9")}
{youtube movie="2c7pVXTGZSI" quality="high" allowFullScreen="y"}
{DIV}

{DIV(class="embed-responsive embed-responsive-4by3")}
{youtube movie="2c7pVXTGZSI" quality="high" allowFullScreen="y"}
{DIV}

{HTML()}
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/2c7pVXTGZSI" allowfullscreen="y"></iframe>
</div>
{HTML}

{HTML()}
<div class="embed-responsive embed-responsive-4by3">
<iframe src="https://www.youtube.com/embed/2c7pVXTGZSI" allowfullscreen="y"></iframe>
</div>
{HTML}

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

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

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

{HTML()}
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/PL_R3zEjqEc" frameborder="0" allowfullscreen="y"></iframe>
</div>
{HTML}

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:

{flash type="url" movie="http://www.youtube.com/p/25DD9663EE128030"}

Related pages

• PluginBlipTV
• PluginMediaPlayer
• PluginVimeo
• PluginWatershed