Videos

Use videos that loop or progress on user scroll.

Something something video

Now here’s an example of a video filling to fit the space:

You can tell all sorts of stories with videos.

Maybe you’ve gone on a journey.
Credit: Cristian-Manieri/Pixabay

You can trigger a video to play using [@cr-ship]{.play-video}.

You can also pause it using [@cr-ship]{.pause-video}.

Apply the .scale-to-cover class to videos to ensure that they fill up the whole Closeread sticky column (even if they need to be cropped to do it).

This is great for photojournalistic use cases like interviews where not every part of the frame needs to be visible.



This works for sidebar layouts too:



The video may even be there simply to establish a mood for your story.
Credit: Domka_1611/Pixabay

You may want to add autoplay="true" and loop="true" to your videos.

Tip

Most browsers will prevent videos with sound from autoplaying. You can avoid this problem by also adding muted="true".

In this case, we’ve shifted the video and put a crossfade in the middle of it for a seamless loop.



Videos that progress on scroll

Here’s a video made with the {rayshader} package, rayshader.mp4:

Let’s incorporate rayshader.mp4 into a scrolly section: instead of .play-video and .pause-video, we’ll use .scroll-video.



Here’s our rayshader video again…

But this time, the video scrolls across several triggers…

… rather than resetting as each one passes!



If you want to use several narrative blocks as the video scrolls, we recommend attaching .scroll-video to a progress block, rather than an individual narrative block.

Progress blocks let you “stretch” the progress of a sticky across several narrative blocks. Wrap those blocks in a .progress-block, and instead of using the @-style cross-reference to refer to the sticky, use focus-on:

::::{.cr-section}

:::{.progress-block focus-on="somemovie" .scroll-video}
One comment

And another comment

And a third!
:::

![](mymovie.mp4){#somemovie alt="A movie"}

::::

To scroll, or not to scroll?

Which kind of video should use? That depends on what you’re trying to do.

If your need to explain something to readers in steps in lockstep with the progression of a video, consider using .scroll-video. The video will only go as quickly as a user scrolls, allowing you to take the time to explain different elements. Just remember that sound won’t work with scrolling videos.

If your video is complementary to the text, or there’s sound you want readers to hear, consider using .play-video and .pause-video. You can use looping to make sure readers catch everything, but keep in mind that their attention may be split between the video and the narrative.

Tip

Browsers often disable autoplay if a video has sound. If yours has sound, consider prompting readers to start the video themselves.