{{import_globals}}
<div class="component__inner media__inner mr_media_wrapper" style="background-color: {{bgColor}};">


 

  {{#any _transcript._externalTranscript _transcript._inlineTranscript}}
  <button class="aria-label js-skip-to-transcript" tabindex="-1"
    aria-label="{{_globals._components._media.skipToTranscript}}"></button>
  {{/any}}

<div class="mediaPageWrapper">
  <div class="textHeadingMedia">
      <p role="heading" style="color: {{titleColor}};">{{{headingTitle}}}</p>
    </div>

    <span >
       {{> component this}}
    </span>   
    <div class="container-title">{{#if instructionAriaLabel}}
 <span role="text" aria-label="{{{instructionAriaLabel}}}" style="position: absolute;
position: absolute;
display: inline;
width: 54%;
background: transparent;
min-height: 448px;
left: -8px;
right: 0;
margin: 1px auto;
margin-top: 10px;"></span>
{{/if}}
   <div class="video-row-container transcript-hidden {{#if audio}} audio-container {{/if}}" style="background-color: {{bgColor}};">
    <div class="video-col {{#if audio}} audio-inner-container {{/if}}">
      <div class="component__widget media__widget a11y-ignore-aria">

        {{#if _media.mp3}}
        {{#if _media.poster}}
        <img alt="{{_media.imgalt}}" class="media_poster is-audio {{#if audio}} audioBtn {{/if}}" src="{{_media.poster}}">
        {{/if}}
        <audio src="{{_media.mp3}}" type="audio/mp3" id="audio" style="width: 100%; height: 100%;" />
        {{else}}
        {{#if _media.ogg}}
        <audio src="{{_media.ogg}}" type="audio/ogg" style="width: 100%; height: 100%;" />
        {{else}}
        <video aria-hidden="true" preload="none" {{#if _playsinline}}playsinline{{/if}}
          {{#if_value_equals _media.type "video/vimeo"}}{{else}}poster="{{_media.poster}}" {{/if_value_equals}}
          style="width:100% !important; height:100% !important;" controls="controls">
          {{#if _media.source}}
          <source src="{{_media.source}}" type="{{_media.type}}" />
          {{else}}
          {{#if _media.mp4}}
          <source src="{{_media.mp4}}" type="video/mp4" />
          {{/if}}
          {{#if _media.ogv}}
          <source src="{{_media.ogv}}" type="video/ogg" />
          {{/if}}
          {{#if _media.webm}}
          <source src="{{_media.webm}}" type="video/webm" />
          {{/if}}
          {{/if}}
          {{#if _useClosedCaptions}}
          {{#each _media.cc}}
          <track kind="subtitles" src="{{src}}" type="text/vtt" srclang="{{srclang}}" />
          {{/each}}
          {{/if}}
        </video>
        {{/if}}
        {{/if}}
      </div>

    <div class="trans-col">
      {{#if _transcript}}
      <div class="media__transcript-container">

{{!-- {{#if _transcript.isDownloadbtn}}
     <a href="{{_transcript.downloadPDF}}" download class="media__transcript-btn media__transcript-btn-external {{#if audio}} audioBtn {{/if}}" style="width: 100%; display: inline-block;text-align: center;
    border-radius: 0;
    padding: 8px 10px;
    text-decoration: none;">
          <span class="media__transcript-btn-text">
            Download transcript
          </span> 
        </a>
{{/if}} --}}

        {{#if _transcript._inlineTranscript}}
        <button class="media__transcript-btn media__transcript-btn-inline js-media-inline-transcript-toggle Hovering-effect"
          aria-expanded="false" tabindex="0">
          {{!-- <span class="icon icon-controls-left"></span> --}}
          <span class="media__transcript-btn-text">
            {{#if _transcript.inlineTranscriptButton}}
            {{_transcript.inlineTranscriptButton}}
            {{else}}
            {{_transcript.transcriptLink}}
            {{/if}}
          </span>
        </button>
        {{/if}} 
  
        {{#if _transcript._externalTranscript}}
        <button class="media__transcript-btn media__transcript-btn-external js-media-external-transcript-click {{#if audio}} audioBtn {{/if}}"
          onclick="window.open('{{_transcript.transcriptLink}}')">
          <span class="media__transcript-btn-text">
            {{#if _transcript.transcriptLinkButton}}
            {{_transcript.transcriptLinkButton}}
            {{else}}
            {{_transcript.transcriptLink}}
            {{/if}}
          </span>
        </button>
        {{/if}}

     
        {{#if _transcript._inlineTranscript}}
        <div class="media__transcript-body-inline" role="region"
          aria-label="{{#if _transcript.inlineTranscriptButton}}{{_transcript.inlineTranscriptButton}}{{else}}{{_transcript.transcriptLink}}{{/if}}">
          <div class="media__transcript-body-inline-inner" >
            {{{compile _transcript.inlineTranscriptBody}}}
          </div>
        </div>
        {{/if}}

      </div>
      {{/if}}
    </div>
    
    </div>
     {{!-- {{#if footerText}}
    <div class="textHeadingMedia" style="background-color: transparent;">    
        <p class="" style="margin-bottom: 20px; color:#000; font-size: 1.2rem; margin-top: 5px;">{{{footerText}}}</p>
    </div>
     {{/if}}  --}}

     {{#if footerText}}
          <p class="gmcqFooterText" >{{footerText}}</p>
     {{/if}}

     {{#if bottomText}}
          <p style="text-align: center; font-size:1rem;" >{{bottomText}}</p>
     {{/if}}
  </div>
    </div>

 {{#if endLessonText}}   
    
        <p class="endText">{{endLessonText}}
   
    </div>
      {{/if}} 
</div>
 



</div>