Video

<?php
	$block_classes = array();
	$heading       = get_field( 'heading' );
	$content       = get_field( 'content' );
	$video_url     = get_field( 'video_url' );

	$background_colour = get_field( 'background_colour' );
	if ( $background_colour ) {
		$block_classes[] = 'block-background--' . $background_colour[ 'background_colour' ];
	}
?>

<div class="block block-video <?php echo implode( ' ', $block_classes ); ?>">
	<div class="container">
		<div class="row">
			<div class="col-12 block-video__row">
				<?php if ( $heading = get_field( 'heading' ) ) : ?>
					<p class="h3 block-video__title" data-aos="fade-up"><?php echo esc_html( $heading ); ?></p>
				<?php endif; ?>

				<?php if ( $content ) : ?>
					<div class="content-container" data-aos="fade-up">
						<?php echo $content; ?>
					</div>
				<?php endif; ?>
			</div>
		</div>
		<?php if ( $video_url ) : ?>
			<div class="row">
				<div class="col-12 col-md-10 block-video__video" data-aos="fade-up" data-aos-delay="250">
					<?php if ( $video_placeholder = get_field( 'video_placeholder' ) ) : ?>
						<?php the_responsive_image(array(
							'ID'    => $video_placeholder[ 'ID' ],
							'attrs' => array(
								'alt'   => $video_placeholder[ 'alt' ],
							),
							'sizes' => array(
								'xs' => array(
									'width' => 1200,
									'height' => 622,
									'crop' => array('center', 'center')
								),
								'md' => array(
									'width' => 1200,
									'height' => 622,
									'crop' => array('center', 'center')
								),
								'lg' => array(
									'width' => 1200,
									'height' => 622,
									'crop' => array('center', 'center')
								)
							)
						)); ?>

						<button href="<?php echo $video_url; ?>" data-lity></button>
					<?php endif; ?>
				</div>
			</div>
		<?php endif; ?>
	</div>
</div>