Enable lazy loading in player

The FastPix Player lets you boost page load times and enhance overall performance with lazy loading of video content. By adding the enable-lazy-loading attribute, you can delay the loading of the player until it comes into view. This is especially useful for pages with multiple video elements or for videos positioned below the fold.

What is lazy loading?

Lazy loading is a performance optimization technique that defers the loading of non-essential content until it is needed. In the context of the FastPix Player, this means that the video player will only load when the user scrolls down to where the player is visible on the screen.

How `enable-lazy-loading` works

When the enable-lazy-loading attribute is added to a FastPix Player element, the player will not load right away when the page loads. Instead, an IntersectionObserver monitors the player's visibility in the viewport. Once the player comes into view as the user scrolls, it initializes automatically and starts loading the video content.

How to use `enable-lazy-loading`

Enabling lazy loading in the FastPix Player is simple. Just add the attribute to your <fp-player> tag in your HTML code:

<fp-player  
  title="Your Video Title"  
  playback-id="your-playback-id"  
  enable-lazy-loading> 
</fp-player>

Step-by-step guide

Add the enable-lazy-loading Attribute and Optimize Layout:

Add the enable-lazy-loading attribute to the <fp-player> tag and position the video player in parts of the page where lazy loading is beneficial, such as below-the-fold content. Ensure the player starts outside the initial viewport by adding a margin, like margin-top: 100px:

<div style="margin-top: 100px;"> 
  <fp-player  
    playback-id="Playback_ID"  
    stream-type="on-demand"  
    enable-lazy-loading> 
  </fp-player> 
</div>

Optimize your HTML layout: Position your video player in sections of the page where lazy loading will be most beneficial, such as areas below the fold or content not immediately visible when the page loads.
Monitor loading behavior: When the page loads, the video player will remain in a dormant state. As the user scrolls and the player enters the viewport, the IntersectionObserver will trigger the player to initialize and start loading the video.
Test the implementation: Ensure that the player loads as expected when scrolled into view. Use your browser's developer tools to monitor network activity and confirm that video content is fetched only when the player becomes visible.

Benefits of lazy loading

Improved page load times: By deferring video content loading, the initial page load time is faster, creating a smoother user experience.
Reduced bandwidth usage: Video content is only loaded when necessary, saving bandwidth—particularly useful on pages with multiple video players.
Enhanced user experience: Lazy loading ensures that video content loads seamlessly as users scroll, minimizing the risk of buffering or playback lag.

Accessibility considerations

While lazy loading can greatly improve performance, it’s important to ensure that it doesn’t compromise accessibility. Users who rely on screen readers or keyboard navigation should still be able to interact with the video player as needed. We recommend testing with various assistive technologies to ensure that your implementation remains fully accessible.