How to Create a Brainshark Video Modal for Your Website

June 16, 2015 | LaLiberte Michael
How to Create a Brainshark Video Modal for Your Website

During the Brainshark 2015 Spring User Group series, customers expressed an interest in learning ways to embed presentations and videos into their company website. This blog post is a product of those requests. For other relevant resources for Brainshark customers, check out Spring 2015 User Group Tour Recap, Part 1: PowerPoint Training.

_____________________

The average internet user spends 88% more time on a website with video, according to Adelie Studios. All the more reason to ensure YOUR audience has an easy, convenient viewing experience. So how do we achieve this using a Brainshark video?

Every business incorporates video on their website differently, depending on their needs and website frameworks. Brainshark makes it easy to embed your video presentations to any webpage, but that's not the only way you can make videos viewable on the web.

For example, a 'modal' or 'lightwindow' is a child window that opens within a main screen on a website, typically requiring users to take some action to begin/complete a task before returning to the main part of the website. (Click here for an example). With the right code, you can make your Brainshark presentations viewable right within such a window.

Below I outline the starting steps using HTML, CSS, and a small amount of javascript to display a pop-up modal that will contain a Brainshark video on your website.

Creating a modal or lightwindow for Brainshark presentations

The benefit of a modal is that it will save space by displaying over other content on the page. We will open the modal by clicking on a link (this example uses a text hyperlink, but it could just as easily be an image or other linkable element on a webpage).

There are many ways to achieve the same effect (just google 'website modal' or 'lightwindow'). I am keeping this example simple, but if all this talk of code feels intimidating, don’t worry. Any web developer or seasoned CMS admin should be able to put this functionality in place very easily.

We will start with the HTML, then style that HTML with CSS, and finish it off with interaction using javascript (jQuery). View the working example here.

Here is the beginning structure of the HTML, everything is wrapped within the 'contentArea' div, which is styled with 100% width. This will enable other divs nested within to open within the middle of the content area of the page, no matter what the width of the screen is.

<div id='contentArea'>
 <p>click <a href='#' id='view'>here</a> to launch a modal.</p>

 <p>Here is some text that the modal will show over</p>
 <div id='modal'>
  <p id='close'>close</p>
  <div id='video'>
   <!--Below is where the link to the brainshark goes-->
   <iframe src='https://app.brainshark.com/brainsharkinc/vu?pi=884191175&pause=1&dm=5'></iframe>
  </div>
 </div>
</div>

 

Now we add some styles to these HTML elements (comments inline):


 #contentArea {
  padding: 10px;
  width: 100%;
  height: 100%;
 }

 p { /*styling the paragraph element*/
  font-size: 18px;
  font-family: arial;
  text-align: center;
 }

 #modal {
  position: absolute; /*allow the video to display over other content on the page*/
  top: 40px;
  width: 100%;
  height: 450px;
  display: none; /*set this element to be hidden at first, and display it using javacript*/
 }

 #video {
  width: 700px; /*define a set width and height I want the video to be*/
  height: 430px;
  margin-left: auto; /*set margins to display video in the center of content width*/
  margin-right: auto;
 }

 #modal iframe {
  width: 100%; /*fill the content space defined in #video*/
  height: 100%;
 }

 #close { /*style an obvious button to close when clicked using javascript*/
  color: red;
  text-align:center;
 }

 #close:hover {
  cursor: pointer;
  color: #680000;
 }

 

Now that we have our styles in place, we add the interactivity using javascript to show/hide the modal (comments inline):

<script>
var src = $('#video iframe').attr('src');
//define variable with value of source video
$('#view').on('click', function() { //on click...
 $('#modal').css('display', 'block'); //display #modal
 $('#video iframe').attr('src', src); //set src value as video URL
});
$('#close').on('click', function() { //on click of #close...
 $('#modal').css('display', 'none');//hide #modal
 $('#video iframe').attr('src', ' ');//clear src or video audio will keep playing
});
</script>

Spring 2015 User Group Tour Recap:

Part 1 | Part 2 | Part 3 | Part 4

Download Now
How to Onboard a Winning Sales Team
Set the tone for your reps' success. Improve your sales onboarding program in 6 steps with this blueprint.
View Spectranetics Video
Spectranetics' Sales Enablement Story
See how Brainshark helped Spectranetics' sales team achieve a 95% pass rate on training in this 2-minute video.
Take the assessment now
Is Your Sales Enablement Program Built for Success?
How do you ensure that your reps are sales ready? Find out how your sales enablement program stacks up with this assessment.