Cycle2 YouTube

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.

Video Slideshow

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>

Paul Irish Alex Russel

<<Prev Next>>

Videos and Images

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>

Paul Irish Alex Russel

<<Prev Next>>

Options

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.