ethanstenis/Invodo-Test.html

## Invodo-Test.html
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Invodo Implementation Test">
  <meta charset="utf-8">
  <title>Invodo Implementation Test</title>
  <script type="text/javascript" src="//e.invodo.com/4.0/s/developer.invodo.com.js"></script>


</head>
<body>
 <div id="main">
   <div class="wide">
     <h1>A Test for Invodo Implementation Engineers</h1>
     <p>Follow the instructions in each column below.  Make any changes to HTML, CSS, or JavaScript that you deem necessary to complete all of the tasks.  The following resources from the Invodo online documentation will help you:</p>
     <ul>
       <li><a href="http://docs.invodo.com/display/DLS/Implement+the+InPlayer" target="_blank">Implement the InPlayer</a></li>
       <li><a href="http://docs.invodo.com/display/DLS/Add+Multiple+Videos+to+a+Page" target="_blank">Add Multiple Videos to a Page</a></li>
       <li><a href="http://docs.invodo.com/display/DLS/Common+InPlayer+Enhancements" target="_blank">Common InPlayer Enhancements</a> (event listeners, dynamic sizing, etc.)</li>
     </ul>
   </div>
   <div class="wide content">
     <div class="col-3" style="background-color:lightgreen">
       <p>Add an overlay player to this column using refId 'sizzlereelq32013' and a call-to-action image of your choice.</p>
       <div id="overlayContainer"></div>
     </div>
     <div class="col-3" style="background-color:powderblue">
       <p>Ensure that this embedded video is always sized correctly (i.e., the width of the column and appropriate height) as the browser window is resized, with no overlapping, hidden content, or black bars.
       </p>
<div id="parentWrapper" class="embedded" style="position:relative; width:100%; max-width:800px; min-width:200px; height: 0;">
 <div id="videoContainer" style="height:100%; width:100%;"></div>
</div>
     </div>
     <div class="col-3" style="background-color:beige">
       <p>Add a new embedded video to this column in a similarly responsive container (like the middle column).  Use refId 'invodoset', and whenever this video begins playback, write a message to the browser console announcing that playback has begun.</p>

       <div id="parentWrapper2" class="embedded" style="position:relative; width:100%; max-width:800px; min-width:200px; height: 0;">
 <div id="videoContainer2" style="height:100%; width:100%;"></div>
       </div>

     </div>
   </div>
   <div class="wide bottom" id="footer">
     <p>Bonus: Add some text in this footer that always displays the current value of the middle player's width in pixels.</p>
     <p>The width of the player in the middle column is <span id="playerWidth">unknown</span>.</p>
   </div>
  </div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Invodo Implementation Test">
	<meta charset="utf-8">
	<title>Invodo Implementation Test</title>
	<script type="text/javascript" src="//e.invodo.com/4.0/s/developer.invodo.com.js"></script>


	</head>
	<body>
	<div id="main">
	<div class="wide">
	<h1>A Test for Invodo Implementation Engineers</h1>
	<p>Follow the instructions in each column below. Make any changes to HTML, CSS, or JavaScript that you deem necessary to complete all of the tasks. The following resources from the Invodo online documentation will help you:</p>
	<ul>
	<li><a href="http://docs.invodo.com/display/DLS/Implement+the+InPlayer" target="_blank">Implement the InPlayer</a></li>
	<li><a href="http://docs.invodo.com/display/DLS/Add+Multiple+Videos+to+a+Page" target="_blank">Add Multiple Videos to a Page</a></li>
	<li><a href="http://docs.invodo.com/display/DLS/Common+InPlayer+Enhancements" target="_blank">Common InPlayer Enhancements</a> (event listeners, dynamic sizing, etc.)</li>
	</ul>
	</div>
	<div class="wide content">
	<div class="col-3" style="background-color:lightgreen">
	<p>Add an overlay player to this column using refId 'sizzlereelq32013' and a call-to-action image of your choice.</p>
	<div id="overlayContainer"></div>
	</div>
	<div class="col-3" style="background-color:powderblue">
	<p>Ensure that this embedded video is always sized correctly (i.e., the width of the column and appropriate height) as the browser window is resized, with no overlapping, hidden content, or black bars.
	</p>
	<div id="parentWrapper" class="embedded" style="position:relative; width:100%; max-width:800px; min-width:200px; height: 0;">
	<div id="videoContainer" style="height:100%; width:100%;"></div>
	</div>
	</div>
	<div class="col-3" style="background-color:beige">
	<p>Add a new embedded video to this column in a similarly responsive container (like the middle column). Use refId 'invodoset', and whenever this video begins playback, write a message to the browser console announcing that playback has begun.</p>

	<div id="parentWrapper2" class="embedded" style="position:relative; width:100%; max-width:800px; min-width:200px; height: 0;">
	<div id="videoContainer2" style="height:100%; width:100%;"></div>
	</div>

	</div>
	</div>
	<div class="wide bottom" id="footer">
	<p>Bonus: Add some text in this footer that always displays the current value of the middle player's width in pixels.</p>
	<p>The width of the player in the middle column is <span id="playerWidth">unknown</span>.</p>
	</div>
	</div>

	</body>
	</html>