Spree Videos

Display YouTube video(s) on your product page.

• Thumbnails from YouTube
• Clickable thumbnails to easily switch between videos
• Easily add/remove/edit videos through the spree admin
• No markup will be added to your products if a video is not attached
• Polymorphic watchable association on Spree::Video model – enables you to attach videos to any model in your app
• Versions available for Spree 0.7 & 1.x

Example

There is no deface override included by default to include the videos in your product page. To add videos to your product page:

# products/show.html.erb
<%= render 'video', :product => @product %>

If you are using Twitter Bootstrap, you can easily add title tooltips to your video thumbnails:"

# javascripts/store/your.coffeescript
$('#video-thumbnails > a').tooltip()

Installation

bundle exec rails g spree_videos:install

# auto run via the install generator, but in case you didn't run it
bundle exec rake db:migrate

Configuration

JS + HTML YouTube Parameters

You can specify configuration options that get passed through to the JS dynamic youtube video switcher & the html5 embed. Take a look at config/initializers/spree_videos.rb for example configuration.

Deface Override

By default spree_videos inserts the videos into #product_properties in products/show. Disable the override to remove this behavior.

CSS

You can easily customize the display of the thumbnails / player:

// stylesheets/store/videos.css.less

#product-videos {

	#video-player {
		// player holder
	}

	#video-thumbnails {
		// thumbnail holder

		a {
			// thumbnails 

			display: block;
			float: left;

			&:hover { }
			
			&:first-child { }
			
			&:last-child { }
		}
	}
}

Contributors

• Mark Linn, @markalinn
• Michael Bianco, @iloveitaly
• Aleksey, @alekseydem