Creating Full Screen Video Backgrounds in Articulate Storyline

In my last tutorial, I showed you how you can use Cloudinary to transform and edit the image, whilst also creating a transparent background. In this tutorial, we'll change focus by creating a full screen video background to our Articulate Storyline projects by using Cloudinary and Brackets.io.


Miss the last tutorial? Click this link to watch it now.

Found this tutorial helpful? Don't forget to subscribe to keep in the know.



Resources, tools and codes you'll need:


Resources and Tools:

  • You can grab your own beautiful free stock video footage over at Coverr.

  • Sign up and create your own Cloudinary account to host your own images and video.

  • Download and start coding with Brackets.io, a free open source code editor with live preview options.


Code:

Don't forget to update the codes with your video URL and the name of the video file.


  • Here's the CSS code you'll need:

{ background: url('VIDEO_NAME_HERE.mp4') no-repeat;
 background-size: 100% 100%;
 overflow: hidden;
 }
 
 
 video#bgvid {
 position: fixed;
 top: 50%;
 left: 50%;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 -ms-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -webkit-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
 background: url("VIDEO_NAME_HERE.mp4") no-repeat;
 background-size: cover;
 }

  • Here's the HTML code you'll need:

<video autoplay muted poster playsinline id="bgvid">
 <source src="VIDEO_URL_HERE" type="video/mp4">
 </video>

111 views

Subscribe today and enjoy latest news fresh in your inbox.

Learning Experience Designer

Troy Ashman

  • LinkedIn Icon
  • Facebook Icon
  • Twitter Icon
  • Instagram Icon

Contact

+61 0434 043 405
troyashman@gmail.com

Wentworth Point, NSW
Australia 2127

ABN:  18 248 306 216

© 2020  Troy Ashman

Let's keep in touch