Cornerstone

Social Video

Social Video

A single video card component featuring a Vimeo-powered player with a poster overlay, play button, title, and source credit.

Usage

Used in Social Video Slider

Behavior

  • Clicking the poster button plays the Vimeo video and hides the overlay.
  • Pausing or ending the video restores the poster overlay.
  • Starts muted for iOS autoplay compatibility, then unmutes.
  • autopause: true pauses other Vimeo players when this one starts.
<div class="tcu-social-video">
    <button class="tcu-social-video__poster-button" aria-label="Play video: Undergrad Research by Hannah Scheffer '25">
        <div class="tcu-social-video__poster-overlay">
            <div class="tcu-social-video__text">
                <p class="tcu-social-video__text-title">Undergrad Research</p>
                <p class="tcu-social-video__text-source">Hannah Scheffer '25</p>
            </div>
        </div>
        <div class="tcu-social-video__poster">
            <picture>
                <img class="tcu-social-video__image" src="https://www.tcu.edu/images/home/testimonials/hannah-scheffer.webp" alt="Undergrad Research video thumbnail" loading="lazy" />
            </picture>
        </div>
    </button>
    <div class="tcu-social-video__embed" social-video-id="https://vimeo.com/1040131833/17e36a2d53">
        <div class="tcu-social-video__player"></div>
    </div>
</div>