Giving Banner {% include 'components/banners/giving-banner' %}
#
HTML
<div id="pagelayout_0_articleheader_0_GivingHeader" class="fullwidth-giving-ask fullwidth-giving-ask--video banner-emergency__chevron banner-emergency__strip" data-image="https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);">
    <div class="full-banner--gradient full-banner--gradient-bottom"></div>
    <!-- <div class="full-video">
        <video width="100%" loop="" height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
            <source src="/images/videos/mainsite5/summer-campaign/video.mp4" type="video/mp4">
                <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
                    <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
                    </video>
                </div> -->

    <div class="full-banner__video-aspect-ratio">
        <div class="full-banner__video-wrap" data-video='[{"url": "/images/videos/mainsite5/summer-campaign/header-loop.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
    </div>

    <div id="pagelayout_0_articleheader_0_GivingHeaderInner" class="inner">
        
        <h1 id="pagelayout_0_articleheader_0_TitleText" class="fullwidth-giving-ask__title">Something Great Emergency Appeal</h1>
        <div id="pagelayout_0_articleheader_0_SecondLine" class="fullwidth-giving-ask__secondary">the Myanmar Refugees Emergency Appeal</div>
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetInner">
    <div id="pagelayout_0_articleheader_0_GivingWidget_GivingLargeRow">
		
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetWidth">
            <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetOuter" class="giving-widget giving-widget--inline" data-image-id="pagelayout_0_articleheader_0_GivingHeader" data-text-id="pagelayout_0_articleheader_0_TitleText">

                <div class="fund-selector">

                    <!-- Can be a span or a label. Depends on whether or not there's a select -->
                    <label id="pagelayout_0_articleheader_0_GivingWidget_label_destination" for="destination-select" class="fund-selector__title">DONATE NOW</label>

                    <span id="pagelayout_0_articleheader_0_GivingWidget_SingleFund" class="fund-selector__destination" giving-page="/en/give/myanmar_refugees_emergency_appeal/"></span>

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_StandardAmount" class="fund-selector-field">
                        <div class="custom-input custom-input--currency">
                            <input name="pagelayout_0$articleheader_0$GivingWidget$tbAmount" type="text" id="pagelayout_0_articleheader_0_GivingWidget_tbAmount" class="custom-input__input">
                        </div>
                    </div>

                    

                    

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_SinglePaymentMethod" class="fund-selector-field">
                         <div style="display: block;" class="payment-methods__item payment-methods__item--once">
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByCard','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByCard" class="button pay-by-card"><span>Pay by card</span></button>
                            </div>
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByPaypal','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByPaypal" class="button pay-by-paypal"><span>Pay by</span></button>
                            </div>
                        </div>
                        
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
    </div>
<div class="js-background-image" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);"></div></div>
Twig
<div id="pagelayout_0_articleheader_0_GivingHeader" class="fullwidth-giving-ask fullwidth-giving-ask--video banner-emergency__chevron banner-emergency__strip" data-image="https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);">
    <div class="full-banner--gradient full-banner--gradient-bottom"></div>
    <!-- <div class="full-video">
        <video width="100%" loop="" height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
            <source src="/images/videos/mainsite5/summer-campaign/video.mp4" type="video/mp4">
                <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
                    <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
                    </video>
                </div> -->

    <div class="full-banner__video-aspect-ratio">
        <div class="full-banner__video-wrap" data-video='[{"url": "/images/videos/mainsite5/summer-campaign/header-loop.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
    </div>

    <div id="pagelayout_0_articleheader_0_GivingHeaderInner" class="inner">
        
        <h1 id="pagelayout_0_articleheader_0_TitleText" class="fullwidth-giving-ask__title">Something Great Emergency Appeal</h1>
        <div id="pagelayout_0_articleheader_0_SecondLine" class="fullwidth-giving-ask__secondary">the Myanmar Refugees Emergency Appeal</div>
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetInner">
    <div id="pagelayout_0_articleheader_0_GivingWidget_GivingLargeRow">
		
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetWidth">
            <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetOuter" class="giving-widget giving-widget--inline" data-image-id="pagelayout_0_articleheader_0_GivingHeader" data-text-id="pagelayout_0_articleheader_0_TitleText">

                <div class="fund-selector">

                    <!-- Can be a span or a label. Depends on whether or not there's a select -->
                    <label id="pagelayout_0_articleheader_0_GivingWidget_label_destination" for="destination-select" class="fund-selector__title">DONATE NOW</label>

                    <span id="pagelayout_0_articleheader_0_GivingWidget_SingleFund" class="fund-selector__destination" giving-page="/en/give/myanmar_refugees_emergency_appeal/"></span>

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_StandardAmount" class="fund-selector-field">
                        <div class="custom-input custom-input--currency">
                            <input name="pagelayout_0$articleheader_0$GivingWidget$tbAmount" type="text" id="pagelayout_0_articleheader_0_GivingWidget_tbAmount" class="custom-input__input">
                        </div>
                    </div>

                    

                    

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_SinglePaymentMethod" class="fund-selector-field">
                         <div style="display: block;" class="payment-methods__item payment-methods__item--once">
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByCard','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByCard" class="button pay-by-card"><span>Pay by card</span></button>
                            </div>
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByPaypal','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByPaypal" class="button pay-by-paypal"><span>Pay by</span></button>
                            </div>
                        </div>
                        
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
    </div>
<div class="js-background-image" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);"></div></div>
{}