{{{customeditframe.editframeStart}}}
<div class="campaign-hero" data-module="campaignHero" data-curtain-length="{{curtainLength}}">
    <div class="campaign-hero__header">
        <div class="campaign-hero__header-logo-wrapper">
            <img src="{{logo.src}}" alt="{{logo.altText}}" class="campaign-hero__header-logo" />
        </div>
        <h1 class="campaign-hero__header-title">{{{title}}}</h1>
        <div class="campaign-hero__header-date-wrapper">
            <span class="campaign-hero__header-date">{{date}}</span>
        </div>
    </div>
    <div class="campaign-hero__video-container">
            {{> @cp-medium-youtube-video doNotInitialise=true video=playlist.[0] ratio="16:9" hideControls=true}}
    </div>
    <div class="campaign-hero__video-button-wrapper">
        <div class="campaign-hero__video-button">
            <span class="campaign-hero__video-button-text">
                {{{playButtonText}}}
            </span>
            {{> @cp-green-button additionalClasses="js-green-button" modifier="bold-green"}}
        </div>
    </div>
    <div class="campaign-hero__video-playlist">
        {{#each playlist}}
            <a href="#" class="campaign-hero__video-playlist-artist js-video-link" data-video-id="{{videoId}}" data-video-poster={{posterUrl}}>{{artist}}</a>
        {{/each}}
    </div>
</div>
{{{customeditframe.editframeStop}}}