<div class="c-stickyplayer u-flex u-items-center u-gap-small u-my-small o-bg-faq">
<div class="u-size-full-height u-size-full c-stickyplayer__video-container u-overflow-hidden ">
<div class="svp-video-preroll">
<div class="video-player">
<div class="player">
<video autoplay controls muted src="https://citynews-romatoday.video.stgy.ovh/~media/mp4-hd/19985884372736/fiorello-omaggia-fellini.mp4"></video>
</div>
</div>
</div>
</div>
<div class="c-stickyplayer__content-container">
<h3 class="c-stickyplayer__title u-label-02 u-mb-none u-color-secondary">
Video del giorno
</h3>
<a href="#" class="u-no-underline">
<p class="c-stickyplayer__paragraph u-body-04 u-break-word u-color-secondary u-m-none">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque, aliquam nobis. Incidunt, quibusdam earum! Natus, adipisci deleniti ullam explicabo, error sequi distinctio quas aut officia iure, rem provident eveniet nihil.
</p>
</a>
</div>
</div>
<div class="c-stickyplayer u-flex u-items-center u-gap-small u-my-small o-bg-faq">
<div class="u-size-full-height u-size-full c-stickyplayer__video-container u-overflow-hidden ">
<div class="svp-video-preroll">
<div class="video-player">
<div class="player">
<video
autoplay
controls
muted
src="https://citynews-romatoday.video.stgy.ovh/~media/mp4-hd/19985884372736/fiorello-omaggia-fellini.mp4"
></video>
</div>
</div>
</div>
</div>
<div
class="c-stickyplayer__content-container"
>
<h3
class="c-stickyplayer__title u-label-02 u-mb-none u-color-secondary"
>
{{ title }}
</h3>
<a href="#" class="u-no-underline">
<p class="c-stickyplayer__paragraph u-body-04 u-break-word u-color-secondary u-m-none">
{{ paragraph }}
</p>
</a>
</div>
</div>
{
"title": "Video del giorno",
"paragraph": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque, aliquam nobis. Incidunt, quibusdam earum! Natus, adipisci deleniti ullam explicabo, error sequi distinctio quas aut officia iure, rem provident eveniet nihil."
}
This component shows a container with a video and a related article. When the user scrolls down the page, in mobile view, the component gets sticky in the bottom part of viewport, but only if there is an adv loading, and shows only the video without the related article.
THE COMPONENT IS VISIBLE ONLY IN MOBILE VIEW AND ONLY ON TODAY
In order to display a default sticky-top-video use following syntax:
{% render "@sticky-top-video" %}