Video Card

{#
	{% include '@partial-text-video' with {
		item: {
			bg_image: 1,
			video: {
				id: 'XPjQhvjQbSM',
				service: 'youtube'
			}
		}
	} %}
#}

{% set uniqid_lightbox = uniqid("card-video-lightbox") %}
{% set settings_json = {
	video: {
		id: item.video.id,
		service: item.video.service
	},
	lightboxSelector: '[data-card-video-lightbox="' ~ uniqid_lightbox ~ '"]'
}|json_encode() %}

<!-- Stat Card -->
<div class="js-card-video card card_video card_type_{{ item.type ?: 'default' }}" data-card-video='{{ settings_json }}'>
	<div class="card_inner card_video_inner">
		<figure class="card_video_figure">
			{% include '@partial-image' with {
				class: 'card_video',
				alt: '',
				image: item.bg_image,
				loading: 'lazy',
				sources: [
					img.portraitClassic.sml,
					img.portraitClassic.xsml,
					img.portraitClassic.xxsml
				],
				sizes: [
					"(min-width: 1400px) 289px",
					"(min-width: 1220px) 265px",
					"(min-width: 980px) 250px",
					"(min-width: 780px) 331px",
					"calc(46.88vw - 25px)"
				]
			} %}
		</figure>

		<button
			class="card_video_btn"
			data-card-video-lightbox-btn-toggle="open"
			data-swap-target="#card_video_lightbox_{{ uniqid_lightbox }}"
			data-swap-linked="{{ uniqid_lightbox }}"
			aria-controls="card_video_lightbox_{{ uniqid_lightbox }}"
		>
			{{ icon("video_play_alt") }}
		</button>
	</div>
</div>
<!-- END: Stat Card -->

<div
	id="card_video_lightbox_{{ uniqid_lightbox }}"
	class="card_video_lightbox"
	data-card-video-lightbox="{{ uniqid_lightbox }}"
	aria-hidden="true"
	inert
>
	<div class="card_video_lightbox_inner">
		<button
			class="card_video_lightbox_btn_close"
			data-card-video-lightbox-btn-toggle="close"
			data-swap-target="#card_video_lightbox_{{ uniqid_lightbox }}"
			data-swap-linked="{{ uniqid_lightbox }}"
			aria-controls="card_video_lightbox_{{ uniqid_lightbox }}"
		>
			{{ icon("close") }}
		</button>

		<div class="card_video_lightbox_embed_wrap">
			<div data-card-video-embed></div>
		</div>
	</div>
</div>