description = "Banner Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/mb-youtubeplayer/css/jquery.mb.YTPlayer.min.css');
    $this->addCss('assets/vendor/mb-vimeoplayer/css/jquery.mb.vimeo_player.min.css');
    $this->addJs('assets/vendor/mb-youtubeplayer/js/jquery.mb.YTPlayer.min.js');
    $this->addJs('assets/vendor/mb-vimeoplayer/js/jquery.mb.vimeo_player.min.js');
}
?>
==
<div {% if data.section_banner_id %}id="{{ data.section_banner_id }}"{% endif %} class="banner position-relative overflow-hidden">
    <div class="banner-item {{ data.section_banner_tspace }} {{ data.section_banner_bspace }} 
    {% if data.section_banner_type == 'image' %}{{ data.section_banner_parallax ? 'jarallax' }} bg-cover{% elseif data.section_banner_type == 'color' %}{{ data.section_banner_color }}{% endif %}" 
    {% if data.section_banner_type == 'image' %}
    style="background-image:url('{{ data.section_banner_image|media|resize(1920, 800, { mode: 'crop' }) }}');"
    {% endif %}
    >
    
        {% if data.section_banner_type == 'video' %}
        <video class="vid-cover pos-0 w-100 h-100 position-absolute {{ data.section_banner_parallax ? 'jarallax' }}" autoplay loop muted poster="{{ data.section_banner_image|media }}" data-jarallax-video="mp4:{{ data.section_banner_video|media }}">
            <source src="{{ data.section_banner_video|media }}" type="video/mp4" />
            Your browser does not support HTML5 video.
        </video>
        {% endif %}
        
        {% if data.section_banner_type == 'youtube' %}
        <div id="bgYoutube" class="bg-dark pos-0 w-100 h-100 position-absolute"></div>
        <div id="player-bgYoutube" class="player" 
        data-property="{videoURL:'{{ data.section_banner_svideo }}',containment:'#bgYoutube',stopMovieOnBlur:true,playOnlyIfVisible:true,useOnMobile:true,optimizeDisplay:true,startAt:0,showControls:false,quality:'highres',mute:true,autoPlay:true,loop:true,opacity:1,coverImage:'{{ data.section_banner_image|media|resize(1920, 1080, { mode: 'crop' }) }}',mobileFallbackImage:'{{ data.section_banner_image|media|resize(1920, 1080, { mode: 'crop' }) }}'}">
        </div>
        {% endif %}
        
        {% if data.section_banner_type == 'vimeo' %}
        <div id="bgVimeo" class="bg-dark pos-0 w-100 h-100 position-absolute bg-cover" style="background-image: url('{{ data.section_banner_image|media|resize(1920, 1080, { mode: 'crop' }) }}');"></div>
        <div id="player-bgVimeo" class="player" 
        data-property="{videoURL:'{{ data.section_banner_svideo }}',containment:'#bgVimeo',stopMovieOnBlur:true,playOnlyIfVisible:true,useOnMobile:true,optimizeDisplay:true,startAt:0,showControls:false,quality:'highres',mute:true,autoPlay:true,loop:true,opacity:1,mobileFallbackImage:'{{ data.section_banner_image|media|resize(1920, 1080, { mode: 'crop' }) }}'}">
        </div>
        {% endif %}

        <div class="position-absolute z-10 pos-0 overflow-hidden w-100 h-100 {{ data.section_banner_opacity }} {{ data.section_banner_overlay }}"></div>
        <div class="{{ data.section_banner_container }}">
            <!-- Row  -->
            <div class="row justify-content-center align-items-center">
                
            {% for fields in data.section_banner_caption %}
            {% set total = 12 %}
            {% set size_1 = data.section_banner_caption_size %}
            {% set size_2 = total - size_1 %}
            {% if size_1 == 12 %}
            {% set size_2 = total %}
            {% endif %}
            <div class="z-10 {{ data.section_banner_caption_align }} 
            {% if loop.first %}col-lg-{{ size_1 }} {{ data.section_banner_caption_position }}{% else %}col-lg-{{ size_2 }} 
            {% if fields.section_banner_caption_type == 'content' %}mt-8 {{ size_1 != 12 ? 'mt-lg-0 pl-lg-7' }}{% else %}mt-16 {{ size_1 != 12 ? 'mt-lg-0 pl-lg-7' }}{% endif %} 
            {% endif %}
            ">

                {% if fields.section_banner_caption_type == 'content' %}
                {% for content in fields.section_banner_caption_content %}
                
                {% set animation = content.section_banner_caption_content_anim %}
                {% set delay = content.section_banner_caption_content_delay %}
                {% set duration = content.section_banner_caption_content_durat %}
                
                {% if content.section_banner_caption_content_type == 'header' %}
                <h1 class="line-height-em pb-5 mb-0 {{ content.section_banner_caption_content_weight }} {{ content.section_banner_caption_content_size }} {{ content.section_banner_caption_content_color }}" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}">
                    {{ content.section_banner_caption_content_text }}
                </h1>
                {% endif %}
                
                {% if content.section_banner_caption_content_type == 'subheader' %}
                <h3 class="line-height-em pb-5 mb-0 {{ content.section_banner_caption_content_weight }} {{ content.section_banner_caption_content_size }} {{ content.section_banner_caption_content_color }}" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}">
                    {{ content.section_banner_caption_content_text }}
                </h3>
                {% endif %}
                
                {% if content.section_banner_caption_content_type == 'desc' %}
                <p class="mb-5 {{ content.section_banner_caption_content_weight }} {{ content.section_banner_caption_content_size }} {{ content.section_banner_caption_content_color }}" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}">
                    {{ content.section_banner_caption_content_text }}
                </p>
                {% endif %}
                
                {% if content.section_banner_caption_content_type == 'list' %}
                <div class="py-1 {{ content.section_banner_caption_content_size }} {{ content.section_banner_caption_content_color }}" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}">
                    <span><i class="{{ content.section_banner_caption_content_icon }} text-center line-height-tight d-inline-block w-10r h-6r mr-2"></i> 
                    {{ content.section_banner_caption_content_text }}</span>
                </div>
                {% endif %}
                
                {% if content.section_banner_caption_content_type == 'btn' %}
                <a class="btn btn-rounded btn-chevron {{ not loop.last ? 'mr-5' }} mb-2 {{ content.section_banner_caption_btn_size }} {{ content.section_banner_caption_btn_color }}" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}" href="{{ content.section_banner_caption_content_btn_clink ? content.section_banner_caption_content_btn_clink : (content.section_banner_caption_content_btn_plink | staticPage) }}">
                    <span>{{ content.section_banner_caption_content_text }}<i class="fa fa-chevron-right"></i></span>
                </a>
                {% endif %}
                
                {% endfor %}
                {% endif %}

                {% set animation = fields.section_banner_caption_media_anim %}
                {% set delay = fields.section_banner_caption_media_delay %}
                {% set duration = fields.section_banner_caption_media_durat %}

                {% if fields.section_banner_caption_type == 'image' %}
                <img class="img-fluid" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}" src="{{ fields.section_banner_caption_image|media|resize(false, false, { mode: 'auto' }) }}" />
                {% endif %}
                
                {% if fields.section_banner_caption_type == 'video' %}
                <div class="embed-responsive embed-responsive-16by9" data-aos="{{ animation }}" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}">
                    <video class="embed-responsive-item" controls="">
                        <source src="{{ fields.section_banner_caption_video|media }}" type="video/mp4" />
                        Your browser does not support HTML5 video.
                    </video>
                </div>
                {% endif %}
                
                {% if fields.section_banner_caption_type == 'youtube' %}
                <div class="embed-responsive embed-responsive-16by9" data-aos="{{ animation }}" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ fields.section_banner_caption_svideo }}" frameborder="0" allowfullscreen></iframe>
                </div>
                {% endif %}

                {% if fields.section_banner_caption_type == 'vimeo' %}
                <div class="embed-responsive embed-responsive-16by9" data-aos="{{ animation }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}">
                    <iframe class="embed-responsive-item" src="//player.vimeo.com/video/{{ fields.section_banner_caption_svideo }}"></iframe>
                </div>
                {% endif %}

            </div>
            {% endfor %}

            </div>
        </div>
    </div>
</div>

{% put scripts %}
<script>
// YTPlayer
$(document).ready(function(){
    {% if data.section_banner_type == 'youtube' %}
    $("#player-bgYoutube").YTPlayer();
    {% elseif data.section_banner_type == 'vimeo' %}
    $("#player-bgVimeo").vimeo_player();
    {% endif %}
});
</script>
{% endput %}