What is the best way to make a video load when scrolling to a block with a video?

Question

JavaScript

На сайте имеется несколько коротких видеозаписей, которые воспроизводятся при наведении, весом около 3 мб.
При первой загрузке страницы страница из-за них довольно долго грузится. Естественно при повторной загрузке данные берутся из кэша и загрузка происходит быстро.
Есть идея при первой загрузке подгружать видео, не при загрузке страницы, а тогда, когда юзер проскролит вниз к контейнеру с ними.
Как это удобней всего реализовать с учетом того, что бы при повторной загрузке данные брались из кэша?

Answer 1

Когда-то давно, делал подобное через viewportchecker.js.
В момент скролла до блока через replaceWith подгружал блок с видео.
Для красоты там еще стоял небольшой прелоадер.
https://jsfiddle.net/webirus/tt0uf3sj/ - добавление всего блока
https://jsfiddle.net/webirus/tt0uf3sj/1/ - добавление источников в html

Answer 2

на 2 строках, приблизительно так ;) https://jsfiddle.net/sf7peykx/