/*
What: This CSS+HTML is for implementing Brightcove-based responsive videos. 

Usage: To use to the code, you need a video container div with a class of 1) .brightcove AND 2) the correct sizing class (.fixed, .widescreen, .standard, etc.).
Around that container div,you need a wrapper div with either a width only (in the case of percentage-based sizing) or a height AND width for a fixed-size.

Compatibility: Works in all major browsers, backwards compatible in IE to IE7

Known issues: IE7 has an issue with percentage-based heights, so it uses height: auto for the video player. This will cause some slightly off sizes and
letterboxing on wide screens (the aspect ratio should still be very close to being correct, however). 


<!-- PLAYER HTML -->
<div class="videoplayer">
      <div class="brightcove fixed">
    <!--
    1. BRIGHTCOVE CODE GOES HERE
    2. SELECT CORRECT CLASS BASED ON CONTAINER TYPE
    -->
  </div>
</div>
<!-- END PLAYER HTML -->

*/

/*** BRIGHTCOVE RESPONSIVE VIDEO ***/
.videoplayer {
  margin-top: 20px;
  margin-bottom: 20px;
}
div.videowrap { 
  
  width: 640px; /* Demo only - change to whatever width is needed */
  height: 360px; /* Demo/optional - change to needed height (height is only needed for .fixed container */
}

.brightcove {
  display: block;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 1px; /* adjustment for player controls or video sizing slightly off */
}

.brightcove.fixed {
  height: 100%;
  padding-bottom: 0;
}

.brightcove.widescreen {
  padding-bottom: 56.25%; /* default padding equal to video height (16:9) - h / w */
}

.brightcove.standard {
  padding-bottom: 75%; /* default padding equal to video height (4:3) - h / w */
}


.brightcove div, .brightcove embed, .brightcove object, .brightcove iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

/* fixes for IE5/6 */
* html .brightcove {
  margin-bottom: 45px;
  margin-bottom: 0;
}

/* fix for ie7 having an issue with 100% height */
.brightcove.widescreen div, .brightcove.widescreen embed, .brightcove.widescreen object, .brightcove.widescreen iframe,
.brightcove.standard div, .brightcove.standard embed, .brightcove.standard object, .brightcove.standard iframe {
  *height: auto;
}

/*** END BRIGHTCOVE RESPONSIVE VIDEO ***/