Loading...
 
Skip to main content

History: PluginYouTube

Source of version: 46

Copy to clipboard
            ! 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)).
{maketoc}
!! Parameters
{pluginmanager plugin="youtube"}
Note : You can add using the url parameters a lot more of parameters like autoplay, show control, etc. [https://developers.google.com/youtube/player_parameters|Complete list at Youtube]

!! Show a video
''This code:''
 {CODE(colors="tiki")}
{youtube movie="G1TuB5P4Ypw" width="425" height="350" quality="high" allowFullScreen="y"}
{CODE}

''Would produce:''
{youtube movie="G1TuB5P4Ypw" width="425" height="350" quality="high" allowFullScreen="y"}

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.
__
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 [PluginYoutube#Responsive_YouTube_video_-_Bootstrap_helper_classes_and_iframe_element|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):

{CODE()}
.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;
 }
{CODE}

!!! 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=row)}
{DIV(class=col-md-6)}
''This code ...''
{CODE()}
{DIV(class=video-wrapper)}
{youtube movie="Dm0YnuQeROI" quality="high" allowFullScreen="y"}
{DIV}
{CODE}
%%%%%%

''... will show this video''
{DIV(type=p class=text-info)}of Codecorse from YouTube{DIV}
{DIV(class=video-wrapper)}
{youtube movie="Dm0YnuQeROI" quality="high" allowFullScreen="y"}
{DIV}

{DIV}{DIV(class=col-md-6)}
''This code ...''
{CODE()}
{HTML()}
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/PL_R3zEjqEc" frameborder="0" allowfullscreen="y"></iframe>
</div>
{HTML}
{CODE}

''... will show this video''
{DIV(type=p class=text-info)}of CodeCascade from YouTube{DIV}
{HTML()}
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/PL_R3zEjqEc" frameborder="0" allowfullscreen="y"></iframe>
</div>
{HTML}
{DIV}{DIV}

{DIV(type=p class=text-info)}
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.
{sign user="Torsten" datetime="2017-10-23T21:07:36+00:00"}
{DIV}

!! 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 [https://getbootstrap.com/docs/3.3/components/#responsive-embed|getbootstrap.com]:

{CODE()}
<!-- 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>
{CODE}

__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)"''

{DIV(class=row)}
{DIV(class=col-md-6)}
!!! a. 16 : 9 ratio PluginYoutube

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

''... will show this video''
{DIV(class="embed-responsive embed-responsive-16by9")}
{youtube movie="2c7pVXTGZSI" quality="high" allowFullScreen="y"}
{DIV}

{DIV}{DIV(class=col-md-6)}
!!! c. 4 : 3 ratio PluginYoutube

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

''... will show this video''
{DIV(class="embed-responsive embed-responsive-4by3")}
{youtube movie="2c7pVXTGZSI" quality="high" allowFullScreen="y"}
{DIV}

{DIV}{DIV}

{DIV(class=row)}
{DIV(class=col-md-6)}
!!! b. 16 : 9 ratio iframe

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

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

{DIV}{DIV(class=col-md-6)}
!!! d. 4 : 3 ratio iframe

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

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

{DIV}{DIV}

{DIV(type=p class=text-info)}
Thx to luciash d'being (aka luci) to point out the option to use the Bootstrap helper classes!
{sign user="Torsten" datetime="2017-10-23T23:03:32+00:00"}
{DIV}


!! 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]:
{CODE(colors="tiki")}{flash type="url" movie="http://www.youtube.com/p/25DD9663EE128030"}
{CODE}

{REMARKSBOX(type=tip title=Tip)}Make sure you use the URL which looks like -+/v/wWmE6Zvo37E+- and not like -+watch?v=UmAfQ-GgtCQ+- {REMARKSBOX}
!!Related pages
* ((PluginBlipTV))
* ((PluginMediaPlayer))
* ((PluginVimeo))
* ((PluginWatershed))
        

History

Advanced
Information Version
Bernard Sfez / Tiki Specialist 58
Bernard Sfez / Tiki Specialist Updating information for Bootstrap5. Hope it is ok with the previous writer of the documentation I had to make some choices. 57
Marc Laporte 56
Marc Laporte Flash long gone 55
drsassafras remove legacy version text 54
Yves Kipondo 53
Torsten Fabricius 52
Torsten Fabricius 51
Torsten Fabricius 50
Torsten Fabricius added a few words to fitvid.js 49
Torsten Fabricius 48
Torsten Fabricius try fitvid.js for PluginYoutube 47
Torsten Fabricius maybe more straightforward -> much more straightforward 46
Torsten Fabricius 45
Torsten Fabricius 44
Torsten Fabricius 43
Torsten Fabricius 42
Torsten Fabricius 41
Torsten Fabricius 40
Torsten Fabricius test without .embed-responsive-item but Bootstrap and PluginYoutube 39
Torsten Fabricius 38
Torsten Fabricius 37
Torsten Fabricius typos, finetuning, layout related to the responsive stuff 36
Torsten Fabricius 35
Torsten Fabricius 34
Torsten Fabricius 33
Torsten Fabricius 32
Torsten Fabricius 31
Torsten Fabricius added bootstrap helper class option- thx to luci 30
Torsten Fabricius enhancement of explanaition (just finetuning) 29
Torsten Fabricius typos 28
Torsten Fabricius typo 27
Torsten Fabricius finetuning - layout/formatting 26
Torsten Fabricius finetuning - layout/formatting 25
Torsten Fabricius fine tuning of text and layot - finished - responsive display of videos explained (at least for youtube videos) 24
Torsten Fabricius 23
Torsten Fabricius 22
Torsten Fabricius 21
Torsten Fabricius added explanaition how to make youtube videos responsive 20
lindon 19
Xavier de Pedro 18
Bernard Sfez / Tiki Specialist 17
E.W. Peter Jalajas add YouTube playlist 16
lindon 15
lindon 13
lindon 12
lindon 11
sylvie 10
sylvie 9
lindon 8
  • «
  • 1 (current)
  • 2