Video Scroll Block - Greenshift

Blog Staff

May 20, 2023

This block is very similar to Image sequence block, but it works directly with video. So, it’s more easy to use it because you don’t need to convert video to images.

There are some conses also. Video can be not 100% predictable because different browsers can have different behaviour and rules how video can be autoplayed. Also, there are some notices that iOS devices will not play video if battery mode is set to safe mode (I can’t reproduce this, on my iPhone video is scrolling correctly with battery save mode).

Usage of the block is easy. Just upload video or use video link. Now, when you scroll to video part, then video will play frames depend on scroll position.

Mostly, you will use this block with sticky option and full height.

For this, add a block inside Container Block. Set Container and block to be Full width Align. Then, set the height of the container as 400vh or more (this means 4 full browser windows). More bigger height, more time for a scroll you need to play whole video. You can also try to play with the Playback rate.

Settings for parent Container

Settings for Video Scroll block. As you see, I also set the block to be 100% width and 100vh. This makes it as full browser window.

You can find also video how to add text over video scroll and Pin scroll other elements

Video scroll block will show only 1 frame inside editor, so, you can test how it works only on frontend

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>This block is very similar to <a href="https://greenshiftwp.com/image-sequencer/" data-type="post" data-id="873">Image sequence</a> block, but it works directly with video. So, it's more easy to use it because you don't need to convert video to images.</p>

<p>There are some conses also. Video can be not 100% predictable because different browsers can have different behaviour and rules how video can be autoplayed. Also, there are some notices that iOS devices will not play video if battery mode is set to safe mode (I can't reproduce this, on my iPhone video is scrolling correctly with battery save mode).</p>

<p>Usage of the block is easy. Just upload video or use video link. Now, when you scroll to video part, then video will play frames depend on scroll position. </p>

<div id="gspb_container-id-gsbp-6fcddf66-3f40" class="gspb_container gspb_container-gsbp-6fcddf66-3f40 wp-block-greenshift-blocks-container alignfull">
<div class="wp-block-greenshift-blocks-videoscroll alignfull gs-videoscrloader gspb_id-gsbp-90631baf-ee3f gs-loadnow" data-usewebcodecs="true" data-sticky="true" data-transitionspeed="8" data-framethreshold="0.1" data-setcurrenttimepercent="0" data-source="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4"><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="100%" height="100vh" style="pointer-events:none"/></div>
</div>

<p>Mostly, you will use this block with sticky option and full height.</p>

<p>For this, add a block inside Container Block. Set Container and block to be Full width Align. Then, set the height of the container as 400vh or more (this means 4 full browser windows). More bigger height, more time for a scroll you need to play whole video. You can also try to play with the Playback rate.</p>

<p>Settings for parent Container</p>

<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/height-590x1024.jpg" alt="" class="wp-image-2989" width="295" height="512"/></figure>

<p>Settings for Video Scroll block. As you see, I also set the block to be 100% width and 100vh. This makes it as full browser window.</p>

<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/scroll-528x1024.jpg" alt="" class="wp-image-2990" width="264" height="512"/></figure>

<p>You can find also video how to add text over video scroll and <a href="https://www.youtube.com/watch?v=wfVdOGd9U8s" target="_blank" rel="noreferrer noopener">Pin scroll other elements</a></p>

<div id="gspb_infoBox-id-gsbp-ca8802ad-6da8" class="gspb_infoBox gspb_infoBox-id-gsbp-ca8802ad-6da8 wp-block-greenshift-blocks-infobox"><div class="gs-box notice_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 486.463 486.463"> <g> <g> <path d="M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z"></path> <path d="M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8 c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z"></path> <path d="M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z"></path> </g> </g> </svg></div><div class="gs-box-text">
<p>Video scroll block will show only 1 frame inside editor, so, you can test how it works only on frontend</p>
</div></div></div>