TheaterMania Component Library

Video 

<div class="video">
    <div style="display: block; position: relative; max-width: 100%;">
        <div style="padding-top: 56.25%;"><iframe title="Demo video for TM" src="//preview-players.brightcove.net/v1/accounts/64254751001/players/By3PXdpzZ/preview/embeds/default/master/index.html" allowfullscreen style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"></iframe></div>
    </div>
</div>
 
<div class="video">
  {{#if video-banner}}
    <div class="video__banner">
      <!-- This is using a sample bright cove video player called Peter G test (560 height).
       I removed the initial DIVs position relative provided by Brightcove for the
       max-height demo seen in Banner.js.  -->
      <div style="display: block;"><div style="padding-top: 43.75%;"><video data-video-id="5536441155001"
      data-account="64254751001"
      data-player="BkwMOPODb"
      data-embed="default"
      data-application-id
      class="video-js"
      controls
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video>
        <script src="//players.brightcove.net/64254751001/BkwMOPODb_default/index.min.js"></script></div></div>
    </div>
    {{else}}
      <div style="display: block; position: relative; max-width: 100%;"><div style="padding-top: 56.25%;"><iframe title="{{title}}" src="//preview-players.brightcove.net/v1/accounts/64254751001/players/By3PXdpzZ/preview/embeds/default/master/index.html" allowfullscreen style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"></iframe></div></div>
  {{/if}}
</div>
 
{
  "title": "Demo video for TM",
  "video-banner": null
}
  • Content: 
    .video {
  position: relative;
  display: block;
  max-width: 100%;
}

iframe {
   border: none;

  .video & {
    border: none;
  }
}
  • URL: /components/raw/video/Video.scss
  • Filesystem Path: src/components/02-Patterns/Video/Video.scss
  • Size: 135 Bytes

Code provided by Brightcove. Used the player Waldorf-v1 New Design as an example with basic styling (https://studio.brightcove.com/products/videocloud/players/players/By3PXdpzZ).

Note: we’ll need to add a title to the provided iframe tag to meet accessibility standards.