Primer

HTML

<header>

		<img class="mobile-only" src="/images/mainsite5/jubilee/2-cities/videos/2Cities_Bristol_MOBILE.jpg" />

		<div class="full-banner full-banner--video full-banner--image full-banner--two-cities" data-image="/images/mainsite5/jubilee/2-cities/videos/bristol.jpg">

			<!-- <div class="inner">
				<div class="full-banner__implicit-height-outer">
					<div class="full-banner__implicit-height-inner">

						<div class="full-banner__content full-banner__content--overlaid">
							<h1 class="full-banner__title full-banner--video__title">About us</h1>
						</div>

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

			<div class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.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 class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.webm","mimeType": "video/webm"}]'></div>
			</div> -->

		</div>
	</header>

Twig

<header>

		<img class="mobile-only" src="/images/mainsite5/jubilee/2-cities/videos/2Cities_Bristol_MOBILE.jpg" />

		<div class="full-banner full-banner--video full-banner--image full-banner--two-cities" data-image="/images/mainsite5/jubilee/2-cities/videos/bristol.jpg">

			<!-- <div class="inner">
				<div class="full-banner__implicit-height-outer">
					<div class="full-banner__implicit-height-inner">

						<div class="full-banner__content full-banner__content--overlaid">
							<h1 class="full-banner__title full-banner--video__title">{{ banner_title }}</h1>
						</div>

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

			<div class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.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 class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.webm","mimeType": "video/webm"}]'></div>
			</div> -->

		</div>
	</header>

{
    "banner_title": "About us"
}