{strip}
    {et_isShopVersionAtLeast value="5.6.0-rc.2" assign='shopIsAtLeast56'}
    {$hideConsentLinkText=$hideConsentLinkText|default:false}
    {$useVideoTagForManual=$useVideoTagForManual|default:false}

    {* Video Options URL String *}
    {$options = '?'}

    {if isset($video.offset) && $video.offset}
        {$options = $options|cat:"&start={$video.offset}"}
    {/if}

    {if isset($video.autostart) && $video.autostart}
        {$options = $options|cat:'&autoplay=1'}
    {/if}

    {if isset($video.loop) && $video.loop}
        {$options = $options|cat:'&loop=1'}
    {/if}

    {if isset($video.muted) && $video.muted}
        {$options = $options|cat:'&mute=1'}
    {/if}

    {if !isset($video.showControls) || !$video.showControls}
        {$options = $options|cat:'&controls=0'}
    {/if}

    {* Youtube Specific Options *}
    {if !isset($video.showProposedVideos) || !$video.showProposedVideos}
        {$options = $options|cat:'&rel=0'}
    {/if}

    {* Vimeo Specific Options *}
    {if isset($video.colorInterface) && $video.colorInterface}
        {$options = $options|cat:"&color={$video.colorInterface}"|replace:'#':''}
    {/if}

    {if !isset($video.showPortrait) || !$video.showPortrait}
        {$options = $options|cat:'&portrait=0'}
    {/if}

    {if !isset($video.showBy) || !$video.showBy}
        {$options = $options|cat:'&byline=0'}
    {/if}

    {if !isset($video.showTitle) || !$video.showTitle}
        {$options = $options|cat:'&title=0'}
    {/if}

    {if !empty($video.captionUrl) && $video.provider === 'manual'}
        {* If we have a caption URL, we must use video HTML tag to properly add the track *}
        {$useVideoTagForManual = true}
    {/if}

    {block name="et-video-max-width-styles"}
        {if isset($maxWidth)}
            <style type="text/css">
                {if isset($maxWidth.xs) && $maxWidth.xs !== ''}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #et-video-{$video.id} {
                            max-width: {$maxWidth.xs}px;
                        }
                    }
                {/if}
                {if isset($maxWidth.sm) && $maxWidth.sm !== ''}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px)  {
                        #et-video-{$video.id} {
                            max-width: {$maxWidth.sm}px;
                        }
                    }
                {/if}
                {if isset($maxWidth.md) && $maxWidth.md !== ''}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px)  {
                        #et-video-{$video.id} {
                            max-width: {$maxWidth.md}px;
                        }
                    }
                {/if}
                {if isset($maxWidth.lg) && $maxWidth.lg !== ''}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px)  {
                        #et-video-{$video.id} {
                            max-width: {$maxWidth.lg}px;
                        }
                    }
                {/if}
                {if isset($maxWidth.xl) && $maxWidth.xl !== ''}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #et-video-{$video.id} {
                            max-width: {$maxWidth.xl}px;
                        }
                    }
                {/if}
            </style>
        {/if}
    {/block}

    {block name="et-video-inline-styles"}
        {* Use this block to override styles with an inline style tag *}
    {/block}

    {block name="et-video-container"}
        <div class="et-video-container" id="et-video-{$video.id}">
            {* Resolve Aspect Ration *}
            {if isset($video.aspectRatio) && $video.aspectRatio == '21:9'}
                {$aspectRatio = 'embed-responsive-21by9'}
            {elseif isset($video.aspectRatio) && $video.aspectRatio == '16:9'}
                {$aspectRatio = 'embed-responsive-16by9'}
            {elseif isset($video.aspectRatio) && $video.aspectRatio == '4:3'}
                {$aspectRatio = 'embed-responsive-4by3'}
            {elseif isset($video.aspectRatio) && $video.aspectRatio == '1:1'}
                {$aspectRatio = 'embed-responsive-1by1'}
            {elseif isset($video.aspectRatio) && $video.aspectRatio !== ''}
                {if $shopIsAtLeast56}
                    {$ratio = $video.aspectRatio|split:':'}
                {else}
                    {$ratio = explode(':', $video.aspectRatio)}
                {/if}
                {$aspectRatioPadding = 100 * (float) $ratio[1] / (float) $ratio[0]}
            {else}
                {$aspectRatio = 'embed-responsive-16by9'}
            {/if}

            {block name="et-video-resizer"}
                <div class="et-video-resizer embed-responsive{if isset($video.provider) && $video.provider === 'youtube' || isset($video.provider) && $video.provider === 'vimeo'} needs-consent{/if}{if isset($video.provider) && $video.provider === 'youtube'} youtube{/if}{if isset($video.provider) && $video.provider === 'vimeo'} vimeo{/if} {if isset($aspectRatio)}{$aspectRatio|escape:'html'}{/if}" {if isset($aspectRatioPadding) && !empty($aspectRatioPadding)}style="padding-top: {$aspectRatioPadding}%"{/if}>
                    {block name="et-video-embed"}
                        {if $useVideoTagForManual && $video.provider === 'manual'}
                            <video playsinline {if !empty($video.showControls)} controls{/if}{if !empty($video.autostart)} autoplay{else} preload="metadata"{/if}{if !empty($video.muted)} muted{/if}{if !empty($video.loop)} loop{/if}>
                                <source src="{$video.manualUrl}">
                                {if !empty($video.captionUrl)}
                                    <track default kind="captions" src="{$video.captionUrl}" />
                                {/if}
                            </video>
                        {else}
                            <iframe class="embed-responsive-item{if isset($video.provider) && $video.provider === 'youtube' || isset($video.provider) &&  $video.provider === 'vimeo'} needs-consent{/if}{if isset($video.provider) && $video.provider === 'youtube'} youtube{/if}{if isset($video.provider) && $video.provider === 'vimeo'} vimeo{/if}"
                                    {if isset($video.provider) && $video.provider == 'youtube'}
                                        data-src="//www.youtube-nocookie.com/embed/{$video.videoId}{$options}"
                                        title="{et_language key='et360_aria_iframe_video_youtube'}"
                                    {elseif isset($video.provider) && $video.provider == 'vimeo'}
                                        data-src="https://player.vimeo.com/video/{$video.videoId}{$options}"
                                        title="{et_language key='et360_aria_iframe_video_vimeo'}"
                                    {elseif isset($video.provider) && $video.provider == 'manual'}
                                        src="{$video.manualUrl}{$options}"
                                        title="{et_language key='et360_aria_iframe_video_manual'}"
                                    {/if}
                                    frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
                            ></iframe>
                        {/if}
                        {if isset($video.provider) && $video.provider == 'youtube'}
                            <a href="#" class="trigger give-consent give-consent-preview"
                               data-consent="youtube"
                               style="background-image:url({$ShopURL}/includes/src/OPC/Portlets/Video/preview.svg)">
                                {if empty($hideConsentLinkText)}{lang key='allowConsentYouTube'}{/if}
                            </a>
                        {elseif isset($video.provider) && $video.provider == 'vimeo'}
                            <a href="#" class="trigger give-consent give-consent-preview"
                               data-consent="vimeo"
                               style="background-image: url({$ShopURL}/includes/src/OPC/Portlets/Video/preview.svg)">
                            {if empty($hideConsentLinkText)}{lang key='allowConsentVimeo'}{/if}
                            </a>
                        {/if}
                        {if isset($video.provider) && $video.provider == 'vimeo' && (!isset($vimeoScriptIncludedFlag) || !$vimeoScriptIncludedFlag)}
                            <script data-src="https://player.vimeo.com/api/player.js" data-consent="vimeo" async="async"></script>
                            {assign scope="global" var='vimeoScriptIncludedFlag' value=true}
                        {/if}
                    {/block}
                </div>
                {block name="et-video-transcription"}
                    {if !empty($video.transcription)}
                        <div class="et-video-transcription-wrapper">
                            {if $video.transcriptionDisplayMode === 'popup'}
                                <a href="#"
                                   class="et-video-transcription-link"
                                   target="TranscriptWindow"
                                   tabindex="0"
                                   data-video-transcript="{$video.transcription|escape:'html'}">
                                    {lang key='showVideoTranscriptPopup' section='media'}
                                </a>
                            {else}
                                <div class="et-video-transcription-collapse">
                                    <a href="#et-video-{$video.id}-transcript" class="et-collapse" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="et-video-{$video.id}-transcript">
                                        <span>{lang key='showVideoTranscript' section='media'}</span>
                                        <i class='{et_getIcon key="collapseOpen"} et-collapse-open'></i>
                                        <i class='{et_getIcon key="collapseClosed"} et-collapse-closed'></i>
                                    </a>
                                    <div id="et-video-{$video.id}-transcript" class="collapse">
                                        {$video.transcription}
                                    </div>
                                </div>
                            {/if}
                        </div>
                    {/if}
                {/block}
            {/block}
        </div>
    {/block}
{/strip}