Lazy load autoplay videos

[shirin27]

From vg-volvotrucks-us-rd created by cogniSyb: Netcentric/vg-volvotrucks-us-rd#329

Context/Description

There are performance issues due to multiple videos being loaded and played on PDPs

Agile Requirement As a user, I want videos on the webpage to load only when I scroll near them so that the page loads faster initially, conserves data usage, and enhances my overall browsing experience without unnecessary loading of content I might not view.

As a user, I want videos on the webpage to play only when they’re in view, so that and enhances my overall browsing experience without unnecessary loading of content I might not view.

Acceptance Criteria

User AC:

• Videos start loading and playing only when the user scrolls to within a certain distance from them[^1]
• Videos start playing muted[^2]
• Videos stop playing when the user scrolls past them[^1]

Editor AC:

• Can apply lazyload manually to [v2-embed] blocks

Non-functional AC:

• This applies automatically to [key-facts], [v2-banner], [v2-content-card], [v2-masonry-grid], [v2-media-with-text], [v2-video]

Out of scope

• The [v2-hero] is out of scope as it needs to load as soon as possible
• Local videos are out of scope due to the complexity

Technical details

[^1]: make use of IntersectionObserver [^2]: done with autoplay="any" https://videojs.com/guides/options

[cogniSyb]

Blocked until we can play/pause videos with JavaScript