$noDemoCss=true; $title = 'YouTube'; include '../inc/inc_intro_demo.php'; ?>
Cycle2's YouTube plugin must be included in order to use the optional features described on this page. See the Download page for a link to the YouTube plugin.
Cycle2's YouTube plugin allows you to control video slides with declarative options.
<div class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-timeout=0 data-cycle-prev=#prev data-cycle-next=#next data-cycle-auto-height="640:360" data-cycle-slides=">a" data-cycle-youtube=true data-cycle-youtube-autostart=true > <a href="http://www.youtube.com/v/f7AU2Ozu8eo?version=3&hl=en_US&rel=0">Paul Irish</a> <a href="http://www.youtube.com/v/seX7jYI96GE?version=3&hl=en_US&rel=0">Alex Russel</a> </div>
To include images (or other elements) along with your videos, just use the appropriate selector
with the data-cycle-slides
attribute.
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=0
data-cycle-prev=#prev2
data-cycle-next=#next2
data-cycle-auto-height="640:360"
data-cycle-slides=">a,>img"
data-cycle-youtube=true
data-cycle-youtube-autostart=false
>
<a href="http://www.youtube.com/v/f7AU2Ozu8eo?version=3&hl=en_US&rel=0">Paul Irish</a>
<a href="http://www.youtube.com/v/seX7jYI96GE?version=3&hl=en_US&rel=0">Alex Russel</a>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
</div>
Options are set on the slideshow element using data-cycle-option-name
attributes.
Option attribute names are always lowercase and prefixed with data-cycle-
. For example,
to set the youtube-autostart option you would use the
data-cycle-youtube-autostart
attribute.
Name | Default Value | Description |
---|---|---|
youtube | false | Set to true if your slideshow contains videos. This will
enable plugin logic for the options that follow below.
|
youtube-autostart | false | Set to true to have videos automatically
start when they are visible in the slideshow.
|
youtube-autostop | true | When true videos will be automatically paused
when they are no longer visible in the slideshow.
|
youtube-allow-full-screen | true | Set to false to prevent videos from
being viewed in full-screen mode.
|