YouTube Carousel Example

Getting YouTube videos and carousels working together.

Carousel Example

Important: YouTube videos will not play inline with carousels. We can do the next best thing though, which is loading a preview image.

<div id="gallery-carousel-wrapper">
  <div class="carousel">
    <div class="item">
      <img src="/images/docs/PLAY1_Bathroom.jpg">
    </div>
    <div class="item">
      <div data-tube
           data-video-id="bUhKFNy6Igo"
           data-text-overlay="SONOS PLAY:1">
      </div>
    </div>
    <div class="item">
      <img src="/images/docs/PLAY1_Tablet.jpg">
    </div>
    <div class="item">
      <img src="/images/docs/PLAY1_Bathroom.jpg">
    </div>
    <div class="item">
      <img src="/images/docs/PLAY1_HomeTheater.jpg">
    </div>
    <div class="item">
      <img src="/images/docs/PLAY1_Tablet.jpg">
    </div>
  </div>
  <a href="#" class="prev"><span class="icon-left-open-big"></span></a>
  <a href="#" class="next"><span class="icon-right-open-big"></span></a>
</div>
#gallery-carousel-wrapper {
  position: relative;
  overflow: hidden;
  padding-top: 10px;
}
 
#gallery-carousel-wrapper .carousel .item {
  float: left;
  margin: 0 10px;
  height: 509px;
  width: 904px;
}
 
#gallery-carousel-wrapper .carousel .item iframe,
#gallery-carousel-wrapper .carousel .item img {
  height: 100%;
  width: 100%;
}
 
#gallery-carousel-wrapper .prev,
#gallery-carousel-wrapper .next {
  position: absolute;
  height: 120px;
  width: 45px;
  background: #000;
  top: 37%;
  visibility: visible;
  opacity: .8;
  -webkit-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}
 
#gallery-carousel-wrapper .prev:hover,
#gallery-carousel-wrapper .next:hover {
  opacity: 1;
}
 
#gallery-carousel-wrapper .prev span,
#gallery-carousel-wrapper .next span {
  color: #fff;
  font-size: 2.5em;
  margin-top: 40px;
  display: inline-block;
}
 
#gallery-carousel-wrapper .prev.disabled,
#gallery-carousel-wrapper .next.disabled {
  visibility: hidden;
}
 
#gallery-carousel-wrapper .prev {
  left: 0;
}
 
#gallery-carousel-wrapper .prev span {
  margin-left: -10px;
}
 
#gallery-carousel-wrapper .next {
  right: 0;
}
 
#gallery-carousel-wrapper .next span {
  margin-left: 0;
}
 
#gallery-carousel-wrapper .pagination {
  text-align: center;
  width: 100%;
  height: 20px;
  margin: 20px 0 10px;
}
 
#gallery-carousel-wrapper .pagination a {
  background-color: #999;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  display: inline-block;
  margin-right: 12px;
  opacity: .5;
  -webkit-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}
 
#gallery-carousel-wrapper .pagination a:hover, #gallery-carousel-wrapper .pagination a.selected {
  opacity: 1;
}
 
#gallery-carousel-wrapper .pagination a span {
  visibility: hidden;
}
 
@media only screen and (min-width: 300px) {
  #gallery-carousel-wrapper .carousel .item {
    height: 300px;
    width: 400px;
  }
  #gallery-carousel-wrapper .prev,
  #gallery-carousel-wrapper .next {
    height: 60px;
    width: 50px;
    top: 37%;
  }
  #gallery-carousel-wrapper .prev span,
  #gallery-carousel-wrapper .next span {
    margin-top: 10px;
  }
}
 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #gallery-carousel-wrapper .carousel .item {
    height: 300px;
    width: 400px;
  }
  #gallery-carousel-wrapper .prev,
  #gallery-carousel-wrapper .next {
    height: 60px;
    width: 50px;
    top: 37%;
  }
  #gallery-carousel-wrapper .prev span,
  #gallery-carousel-wrapper .next span {
    margin-top: 10px;
  }
}
 
@media only screen and (min-width: 768px) {
  #gallery-carousel-wrapper .carousel .item {
    height: 375px;
    width: 500px;
  }
  #gallery-carousel-wrapper .prev,
  #gallery-carousel-wrapper .next {
    height: 100px;
    width: 45px;
  }
  #gallery-carousel-wrapper .prev span,
  #gallery-carousel-wrapper .next span {
    margin-top: 30px;
  }
}
$("#gallery-carousel-wrapper .carousel").carouFredSel({
  width: '100%',
  height: 'variable',
  circular: true,
  align: 'center',
  items: {
    visible: 3,
    minimum: 0,
    width: '100%',
    height: 'variable'
  },
  auto: false,
  scroll: {
    items: 1
  },
  prev: {
    button: "#gallery-carousel-wrapper .prev",
    key: "left"
  },
  next: {
    button: "#gallery-carousel-wrapper .next",
    key: "right"
  },
  swipe: {
    items: 1,
    onTouch: true,
    onMouse: true
  }
});