How to separate html loading and video loading?

Question

YouTube

The page loads quickly, but the problem is that videos from YouTube and contact slow down this process, hang the preloader on the entire page, the user has to wait for all the content to load, how to distinguish between loading the page and loading the video, so that the preloader disappears after loading the page and other content except for the video, and the video was loaded later

Answer 1

If you use DOMContentLoaded , then you don't have to wait for all the content to load.
Videos can be dynamically added to the page even after the DOM of the main page is generated.
Alternatively, a poster image is placed for each video, and when clicked, what is required is inserted or initialized depending on the source.