Video Backgrounds

Aug 23, 2016

I've solved the problem of how to make full-screen video backgrounds and documented it here: https://www.linkedin.com/pulse/cracking-full-motion-backgrounds-joseph-dowdy

Here are the steps:

Keep in mind that this applies only to HTML5 output, so please remember to use the HTML5 output in Storyline where you delete the story.html file and then rename your story_html5.html as index.html or whatever filename you like so that everything is rendered in HTML5.

  1. From the main Home menu, go to Player and remove all other items such as player tabs and any items in resources.
  2. While still in the player settings, set all the base layer item colors to be transparent. Go to Player > Colors & Effects > Show Advanced Color Editing and then select all the named items which are in the background under Edit Item: Base >> Main Background and all the other Base layer items (but not the foreground such as buttons, etc.). I have found it helps to save these player settings for reuse later. Just remember that for each item's color setting, you are changing the transparency to 100%. When you output this and look at it, you'll know you missed something if there is a frame or a background that isn't transparent.
  3. Go to your Story View and select your slide (or all slides) and then remove the Next, Prev and Submit buttons. (If you need these then you will just have to recreate them on the canvas.)
  4. Now here's the trick that I discovered and that is to next format the background in Story View at 99% transparent. Believe it or not it won't work if you set the background to be 100% transparent.
  5. The next step is to dig into your output, delete the story.html file and use your story_html5.html file instead (rename it as index.html, for example).
    Then we're going to add code to the end of the head section of your HTML file:
    <style>html,body{
    background: url('http://URLofYourVideo.mp4') no-repeat;
    background-size: cover;
    overflow: hidden;}</style>
  6. Then we're going to add code immediately after the body tag:
    <video autoplay loop><source src="http://URLofYourVideo.mp4" type="video/mp4"></video>

Enjoy! Hats off to Melissa Milloway for laying the foundation on doing this for the first slide. It was getting it to work for all slides that was the real problem.

1 Reply

This discussion is closed. You can start a new discussion or contact Articulate Support.