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

CSO Insights
CSO Insights’ 2016 Sales Enablement Study
Latest trends and research to guide your sales enablement strategy.
Coaching Solutions
Inside Brainshark for Coaching
See how you can help sales reps master their skills and improve performance in this 2-minute demo video.
GE Digital
GE Digital’s Sales Enablement Story
See how GE Digital’s strategy has them on pace for +40% YoY growth.