Tell your story with high-def visuals using the power of the web’s most powerful video player.
Note: We recommend that you add more than one Scrollytelling JWPlayer section in a chain to have a smooth transition effect, this will allow you to unleash its full potential.
Adding a Scrollytelling JWPlayer section
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select Scrollytelling JWPlayer
Select it
Hover over the canvas and click where it says Add section here
Styling a Scrollytelling JWPlayer section
Spacing top: Add padding to the top of the Scrollytelling JWPlayer section in pixels or % to keep spacing between sections
Spacing bottom: Add padding to the bottom of the Scrollytelling JWPlayer section in pixels or % to keep spacing between sections
Width: The width of a Scrollytelling JWPlayer section can't be altered, it'll always be set to cover the 100%
Height: Set the height of the section in Pixels, % or set it to Auto so that it grows as you add content to it
Min H: Sets the minimum amount of height pixels a Scrollytelling JWPlayer section can be. A red stippled horizontal line inside your section will reflect the minimum height
Clip content: Toggle to hide the content that goes beyond the section's edges
Resize to fill vertically: Click to set the section's height to 100%
Background:
Controlbar: Change the background color of the video control's bar
Section Overlay: Add an overlay to the Scrollytelling Video section
Text: Change the size and color of the Play icon
Margin: Add margin to the Play icon
Padding: Add padding to the video control's bar
Icons:
Set custom shape: Replace the default icons with a shape or a custom SVG
Set custom image: Replace the default icons with an image
Aspect Ratio
Specifying and locking the aspect ratio of a Scrollytelling JWPlayer section will allow you to adjust and resize it but still maintain the overall relationship between height and width.
Tip: Right-click the aspect lock to open up a menu of popular aspect ratios.
Configuration options
Parameter | Description |
Duration | Animation time in milliseconds. (350 ms is recommended) |
Easing | Select which easing function you want to use for your Animation |
Embed URL | Add the URL of your video |
Video tracking name | Add the video tracking name |
Show video controls | Toggle to show the video controls |
Autoplay | Toggle to make the video play automatically |
Video covers 100% | Toggle to make the video cover the whole section |
Stretching | Set how the video should fit the section |
Display title | Toggle to show the video's title |
Display description | Toggle to show the video's description |
Organizing Scrollytelling JWPlayer sections
Once a Scrollytelling JWPlayer section has been added it'll appear in the layers panel, you can drag it above or below other sections to place it where you need it in your project. Follow the steps below to learn how to do it.
Select the section in the layers panel
Click and hold it, then drag it above or below the section you want