larva objects: o-video-card
Available Variants
prototypeo-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
}