larva objects: o-video-card

Available Variants

prototype
o-video-card README

This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.

o-video-card Twig The markup file.
<div tabindex="0"
	class="o-video-card__link // {{ o_video_card_link_classes }}" data-video-showcase-trigger="{{ o_video_card_link_showcase_trigger_data_attr }}" data-video-showcase-type="{{ o_video_card_link_showcase_type_data_attr }}" data-video-showcase-dek="{{ o_video_card_link_showcase_dek_data_attr }}" data-video-showcase-title="{{ o_video_card_link_showcase_title_data_attr }}" data-video-showcase-permalink="{{ o_video_card_link_showcase_permalink_data_url }}" data-video-showcase-time="{{ o_video_card_link_showcase_time_data_attr }}" data-video-player-id="{{ o_video_card_player_id_attr }}" data-video-media-id="{{ o_video_card_media_id_attr }}">

	<div class="o-video-card {{ modifier_class }} {{ o_video_card_classes }}" data-video-showcase-autoplay="{{ o_video_card_link_showcase_autoplay_data_attr }}" data-video-showcase-player>

		{% if o_video_card_crop_class %}
		<div class="{{ o_video_card_crop_class }}" data-video-showcase-active-text="{{ o_video_card_crop_data_attr }}">
			{% endif %}

			{% if o_video_card_permalink_url %}
			<a href="{{ o_video_card_permalink_url }}" class="{{ o_video_card_permalink_classes }}">
				{% endif %}
				<img class="o-video-card__image {{ o_video_card_image_classes }}" data-lazy-src="{{ o_video_card_image_url }}" src="{{ o_video_card_lazy_image_url }}" alt="{{ o_video_card_alt_attr }}">
				{% if o_video_card_permalink_url %}
			</a>
			{% endif %}

			{% if o_video_card_is_player %}
				<iframe class="js-VideoShowcasePlayerIframe" title="video" hidden frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" data-video-showcase-iframe></iframe>
				{% if o_video_card_id_attr %}
					<div hidden id="{{ o_video_card_id_attr }}" data-video-showcase-jwplayer></div>
				{% else %}	
					<div hidden id="jwplayerContainer" data-video-showcase-jwplayer></div>
				{% endif %}
				{% if o_video_card_connatix_id_attr %}
					<div hidden id="{{ o_video_card_connatix_id_attr }}" data-video-showcase-connatix></div>
				{% else %}
					<div hidden id="connatixContainer" data-video-showcase-connatix></div>
				{% endif %}

				<div class="js-VideoShowcasePlayerOembed" hidden data-video-showcase-oembed></div>
			{% endif %}

			{% if c_play_icon %}
				{% if o_video_card_permalink_url %}
					<a href="{{ o_video_card_permalink_url }}">
				{% endif %}
				{% include "@larva/components/c-play-badge/c-play-badge.twig" with c_play_icon %}
				{% if o_video_card_permalink_url %}
					</a>
				{% endif %}
			{% endif %}

			{% if o_video_card_crop_class %}
		</div>
		{% endif %}

		<div class="o-video-card__meta // {{ o_video_card_meta_classes }}">
			{% if o_indicator %}
				{% include "@larva/objects/o-indicator/o-indicator.twig" with o_indicator %}
			{% endif %}

			{% if o_category_link %}
				{% include "@larva/objects/o-category-link/o-category-link.twig" with o_category_link %}
			{% endif %}

			{% if c_heading %}
				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
			{% endif %}

			{% if c_title %}
				{% include "@larva/components/c-heading/c-heading.twig" with c_title %}
			{% endif %}

			{% if c_dek %}
				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
			{% endif %}

			{% if c_span %}
				{% include "@larva/components/c-span/c-span.twig" with c_span %}
			{% endif %}
		</div>

	</div>

</div>
o-video-card JSON The data object for this pattern.
{
	"o_video_card_permalink_url": "#single_url",
	"o_video_card_alt_attr": "Thumbnail image",
	"o_video_card_image_url": "https://source.unsplash.com/random/595x333",
	"o_video_card_lazy_image_url": "https://source.unsplash.com/random/595x333",
	"o_video_card_caption_text": "Here is some caption text",
	"o_video_card_link_showcase_trigger_data_attr": "
", "o_video_card_link_showcase_type_data_attr": "oembed", "o_video_card_link_showcase_permalink_data_url": "#url_test", "modifier_class": "", "o_video_card_classes": "u-background-color-picked-bluewood u-margin-r-1@tablet lrv-u-justify-content-space-between", "o_video_card_crop_class": "lrv-a-crop-16x9 lrv-a-glue-parent c-play-badge-parent", "o_video_card_image_classes": "is-to-be-hidden lrv-u-display-block", "o_video_card_is_player": true, "c_label": "", "o_video_card_crop_data_attr": "", "o_video_card_meta_classes": "lrv-u-flex lrv-u-flex-direction-column lrv-u-width-100p u-padding-lr-075@mobile-max lrv-u-padding-tb-050 u-position-relative", "o_video_card_link_classes": "lrv-u-width-100p", "o_video_card_permalink_classes": "u-margin-r-050@mobile-max", "c_play_icon": { "c_play_badge_classes": "lrv-a-glue lrv-a-glue--b-0 u-transform-translate-a-n50p u-width-55 u-height-55 is-to-be-hidden", "c_play_badge_background_fill_classes": "lrv-u-background-color-transparent" }, "c_title": false }