cancel
Showing results for 
Search instead for 
Did you mean: 

Add video to RWD home page slideshow

Add video to RWD home page slideshow

Hi All,

 

I love the default slideshow slider and have it working fine with images.  I would like to make the last image a video that is auto playing without sound.  Here is what I have so far.  It works on IE and Firefox but not on Chrome.  On Chrome the video is not playing.

 

Home page code:

<div class="slideshow-container">
	<ul class="slideshow">
		<li><a href="{{config path="web/unsecure/base_url"}}index.php/foo.html"><img src="{{media url="sample/slide-1.jpg"}}" alt="Foo Stuff" /></a></li>

		<li><a href="{{config path="web/unsecure/base_url"}}index.php/foo2.html"><img src="{{media url="sample/slide-2.jpg"}}" alt="Foo Stuff 2" /></a></li>

		<li>
		<video preload="auto" loop="" autoplay="" muted="">
				<source src="{{media url="sample/istock_test.mp4"}}"" type="video/mp4"/>
				<source src="{{media url="sample/istock_test.webm"}}"" type="video/webm"/>
				Your browser does not support HTML5 video.
			</video>
		</li>
</ul>
</div>

And here is a modification to ~\skin\frontend\rwd\default\css\styles.css:

.slideshow-container .slideshow > li video {
  max-width: 1178px;    !important;
  width: 100%;
}

 

So the question is how to get it auto playing for Chrome?

 

I'm fiddling around with the code and googling now.  All tips welcome!  I'm sure others would like to do this as well.

 

Thanks

2 REPLIES 2

Re: Add video to RWD home page slideshow

Maybe it's not a perfect solution, but when you upload your video to youtube, you can embed this video without problems and supported by every browser. If you upload the video without direct, public access (so only accessible with the correct link) you've got a likewise situation.

Re: Add video to RWD home page slideshow

It doesn't work in my case.  Videos embedded in the slideshow-container don't auto play on chrome.  Though I can get them to autoplay when not in the slide show.  Smiley Sad