To create a video slideshow, first make sure you have a Slideshow setup already working on your site by going in your Bootstrap backend site to Settings -> Design Settings -> Homepage Slideshow and enabling the Slideshow. After this, follow this steps:


1. Customize and Edit the Bootstrap Theme - Display - Background Slideshow widget

2. On the HTML Tab replace everything with the following:

 

<video class="videoSlider" width="100%"  height="100%" src="http://www.oggtv.com/MAIN-VIDS4/5/OGGTV.ogg" preload autoplay>
    <p>Your Web Browser is Old. This page needs a modern browser.</p>
</video>

 

3. On the CSS Tab replace everything with the following:

 

.videoSlider {
    position:absolute;
    top:-29%;
    z-index:-10;
}


4. Adjust the top CSS property mentioned on the code in Step 3 to your liking so the video positions correctly on your site.


Some of the best practices when uploading the video are:


  • Make sure the video is in OGG or MP4 format, since this formats are universally accepted by all browsers, so your video can reach all your audience (Desktop).
  • On Mobile Browsers, only Firefox has support for both, OGG or MP4 video formats.
  • Note that Internet Explorer is lacking more than 50% of all HTML5 Web Technologies (As of Internet Explorer 11)
  • Make sure that when creating the video, the aspect ratio of the video adapts correctly to your site.
  • Make sure the video size is not big (Should be around some Kilobytes, not several megabytes), so your page loads fast even with the video on it.
  • Make sure the Width of the video is larger than the Height. This will avoid having a huge video your members will see and be forced to scroll down to use the search box.
  • Make sure the Height of the video is not too big because it will push the search box and any other content of the homepage down.
  • For the Aspect Ratio of the video, you can play around with the width and height mentioned on Step 2 (Both have 100%) to help you fit the video on your site.
  • The URL to the video is set on the video tag as shown on Step 2 with the src attribute. You can put the video on your site or any other place, but remember it should be ogg to be supported on all browsers.
  • Other formats supported but not by all browsers are MP4, WEBM.



If you need to use a tool to convert a video to an OGG file, please try the Video Online Convert site. 

If you want to test the support for your browser you can go to this 2 excellent sites: