Best method to avoid Cumulative Layout Shift?

[Nathan]

Hey, love the facade, definitely helps to decrease the Time to Interactive and Total Blocking Time on the page.

We are experiencing a large amount of Cumulative Layout Shift since implementing lite-youtube, and was wondering if any of the contributors or users of the component have solved this. The native iframe didn't seem to have this issue.

Is there a way that I can get the height and width of the video earlier, or apply styles to the component to avoid this?

[Justin Ribeiro]

Is there a way that I can get the height and width of the video earlier

That's going to depend on the container you've placed lite-youtube in. lite-youtube has :host styles that set it's width to 100% and then calculate the 16:9 ratio.

apply styles to the component to avoid this

If you know the context of where lite-youtube is on the page, you can style before the custom element lifecycle upgrades to prevent the shift. You could use similar code as the aforemetioned :host style:

lite-youtube/lite-youtube.ts

Lines 120 to 126 in c301ef2

         :host { 
           contain: content; 
           display: block; 
           position: relative; 
           width: 100%; 
           padding-bottom: calc(100% / (16 / 9)); 
         } 

to do something along the lines of:

lite-youtube {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: calc(100% / (16 / 9));
}

On upgrade, the container then won't create a CLS (ala, it won't push content down on the lazy load).

[Nathan]

Works like a charm

Legend, thanks mate.