<div>
    <div style="{{#ifCond bgcolorimageStyle '===' 'image'}}background-image: url('{{bgcolorimageDesktopImage.src}}'); background-size: cover;{{/ifCond}}
                {{#ifCond bgcolorimageStyle '===' 'color'}}background-color: {{bgcolorimageBackgroundColor}};{{/ifCond}}
                {{#if customPaddingDesktop}} padding: {{customPaddingDesktop}}{{unit}};{{/if}}
                {{#if customMarginDesktop}} margin: {{customMarginDesktop}}{{unit}};{{/if}}
                {{#ifCond removeMargin '===' "true"}} margin-left: 0; margin-right: 0; {{/ifCond}}"
         class="videoWrapper d-none d-sm-block
                {{#if customPaddingDesktop}} {{else}} padding-{{paddingDesktop}}{{/if}}
                {{#if customMarginDesktop}}  {{else}} margin-{{marginDesktop}}{{/if}}">
        <div class="videoTitle videoContainer" style="{{#ifCond fullOrMax '===' "maxWidth"}} width:{{videoMaxSize}}px;{{/ifCond}}">
            {{title}}
            <div class="embed-responsive embed-responsive-16by9" >
                  <iframe
												{{#if altTextVideo}}
													title="{{altTextVideo}}"
												{{/if}}
												class="embed-responsive-item lazyload" data-src="{{videoSrc}}" ></iframe>
            </div>
             <div class="transcriptionContainer {{#if customMarginDesktop}} {{else}} transcriptPosition-{{marginDesktop}}{{/if}}"
                   style="{{#if customMarginDesktop}} right: {{customMarginDesktop}}{{unit}};{{/if}}
                    {{#if videoTranscript}} {{else}} display: none;{{/if}}">
                        <button type="button" role="button" aria-pressed="false" class="transcriptShowBtn" style=" display: block;">...</button>
                        <button type="button" role="button" aria-pressed="true" class="transcriptHideBtn" style="display: none;">X</button>
            </div>
        </div>
    </div>

    <div style="{{#ifCond bgcolorimageStyle '===' 'image'}}
                    {{#if bgcolorimageMobileImage.src}}
                        background-image: url('{{bgcolorimageMobileImage.src}}');
                    {{else}}
                        background-image: url('{{bgcolorimageDesktopImage.src}}');
                    {{/if}} background-size: cover;
                {{/ifCond}}
                {{#ifCond bgcolorimageStyle '===' 'color'}}background-color: {{bgcolorimageBackgroundColor}};{{/ifCond}}
                {{#if customPaddingMobile}} padding: {{customPaddingMobile}}{{unit}};{{/if}}
                {{#if customMarginMobile}} margin: {{customMarginMobile}}{{unit}};{{/if}}
                {{#ifCond removeMargin '===' "true"}}margin-left: 0; margin-right: 0;{{/ifCond}}"
         class="videoWrapper d-block d-sm-none
                {{#if customPaddingMobile}} {{else}} padding-{{paddingMobile}}{{/if}}
                {{#if customMarginMobile}}  {{else}} margin-{{marginMobile}}{{/if}}">
        <div class="videoTitle videoContainer" style="{{#ifCond fullWidth '===' 'videoMaxWidth'}} width:{{videoMaxSize}}px;{{/ifCond}}">
            {{title}}
            <div class="embed-responsive embed-responsive-16by9" >
                  <iframe
													{{#if altTextVideo}}
														title="{{altTextVideo}}"
													{{/if}}
													class="embed-responsive-item lazyload" data-src="{{videoSrc}}" ></iframe>
            </div>
            <div class="transcriptionContainer {{#if customMarginMobile}} {{else}} transcriptPosition-{{marginMobile}}{{/if}}"
               style="position:absolute; {{#if videoTranscript}} {{else}} display: none;{{/if}}
                {{#if customMarginMobile}} right: {{customMarginMobile}}{{unit}};{{/if}}">
                    <button role="button" aria-pressed="false" class="transcriptShowBtn" style="background-color:#32CD32; display:block;">...</buton>
                    <button role="button" aria-pressed="true" class="transcriptHideBtn" style="background-color:#32CD32; display:none;">X</buton>
            </div>
        </div>
    </div>
    
    <div class="transcriptTextContainer" {{#if videoTranscript}} aria-hidden="true"{{/if}}
        style="{{#ifCond videoSize '===' 'videoMaxWidth'}} width:{{videoMaxSize}}px; margin:0 auto; {{/ifCond}}">
        <span class="transcripText">{{{videoTranscript}}}</span>
    </div>

    {{{slotHTML}}}
</div>




