Cornerstone

Cinema Scroll

Cinema Scroll with hammerhead, heading, paragraph, and a video that expands on scroll until full width (stops at 100%).

Desktop (≥1024px): Initial video width 43% → expands to 100% on scroll Mobile/Tablet (<1024px): Video is static (no scroll animation)

<div class="tcu-cinema-scroll">
    <div class="tcu-cinema-scroll__inner">
        <div class="tcu-cinema-scroll__intro">

            <div class="tcu-cinema-scroll__hammerhead">Exceptional Academics</div>
            <div class="tcu-cinema-scroll__content">
                <h2>Where Your Education is Personal</h2>
                Lorem ipsum dolor sit amet consectetur. Mauris rutrum integer augue molestie metus. Cursus ante proin sapien viverra. Elit nibh mauris senectus velit praesent.
            </div>
        </div>
        <div class="tcu-cinema-scroll__video-wrapper">
            <div class="tcu-cinema-scroll__video-container">
                <div class=" tcu-video">
                    <div id="vimeo-https://player.vimeo.com/video/728168863" data-vimeo-id="https://player.vimeo.com/video/728168863" data-vimeo-responsive="true" data-vimeo-background="true" data-vimeo-width="1420" data-vimeo-height="800" data-vimeo-transparent="false">
                    </div>
                    <button aria-live="polite" class="_pause"><span aria-hidden="true">❚❚</span> Pause</button>
                </div>
            </div>
        </div>
    </div>
</div>