Loading...
 
Embed a YouTube video in a page

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.

Parameters

Introduced in Tiki 2. Required parameters are in bold.
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 HTML color code, e.g. ffffff Toolbar background color. Use an HTML color code. Example: ffffff 6.1
border HTML color code, e.g. ffffff 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 - 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.
Torsten Fabricius



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

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()}
<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.
Torsten Fabricius



Responsive YouTube video - 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:

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


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 ...”
{DIV(class="embed-responsive embed-responsive-16by9")}
{youtube movie="2c7pVXTGZSI" quality="high" allowFullScreen="y"}
{DIV}


... will show this video





c. 4 : 3 ratio PluginYoutube


‘’This code ...”
{DIV(class="embed-responsive embed-responsive-4by3")}
{youtube movie="2c7pVXTGZSI" quality="high" allowFullScreen="y"}
{DIV}


... will show this video








b. 16 : 9 ratio iframe


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


... will show this video



d. 4 : 3 ratio iframe


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


... will show this video





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




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

doc.tiki.org


Bootstrap

AdminGuide

UserGuide

Keywords

Keywords serve as “hubs” for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting (7.x)
Articles and Submissions
Backlinks
Banners
Batch (6.x)
BigBlueButton audio/video/chat/screensharing (5.x)
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution (2.x)
Cookie
Copyright
Credit (6.x)
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs 8.x
Draw 7.x
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management (4.x)
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links (3.x)
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags (2.x)
Task
Tell a Friend, alert + Social Bookmarking
TikiTests (2.x)
Theme CSS & Smarty
Trackers
Transitions (5.x)
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebHelp
WebDAV (5.x)
Webmail
Web Services
Wiki 3D
Wiki History, page rename, etc
Wiki Page Staging and Approval (2.x)
Wiki Plugin extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG (2.x)
XMLRPC


Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki
Show php error messages