How best to make the video load when scrolling to the block with the video?

There are several short videos that play when you hover, weighing about 3 MB.
When you first load the page because of them quite a long time to boot. Naturally when reloading the data taken from the cache and downloading is fast.
Any idea when you first load load the video, not when the page loads and when the user ProCredit down to the container with them.
As it is most convenient to implement given the fact that would when reloading the data were taken from the cache?
July 2nd 19 at 18:20
2 answers
July 2nd 19 at 18:22
Solution
Once upon a time, did this through viewportchecker.js.
At the time of scrolling up to the unit using replaceWith load the block with the video.
For beauty there stood a small preloader.
https://jsfiddle.net/webirus/tt0uf3sj/ - adding the entire block
https://jsfiddle.net/webirus/tt0uf3sj/1/ - add the sources in the html
Ie with this plugin you can upload the items content or only the attributes? - Tierra_Wolff commented on July 2nd 19 at 18:25
: https://jsfiddle.net/webirus/tt0uf3sj/
At first load only the HTML, and when "zakrutki the block" is replaced with the contents of the block on the div with the video. - caleb_Stehr commented on July 2nd 19 at 18:28
But you can play with them and add for example only source, of which there is no default. Example just made. Through replave can change anything. - caleb_Stehr commented on July 2nd 19 at 18:31
: Here is the second option, the replacement only for Loading source https://jsfiddle.net/webirus/tt0uf3sj/1/ - caleb_Stehr commented on July 2nd 19 at 18:34
: And the last variant https://jsfiddle.net/webirus/tt0uf3sj/2/ - to change directly source. - caleb_Stehr commented on July 2nd 19 at 18:37
Not replacing src hostility have) Not let me have an empty src. - caleb_Stehr commented on July 2nd 19 at 18:40
Thank you've got the idea, it's called Lazy Load - Tierra_Wolff commented on July 2nd 19 at 18:43
July 2nd 19 at 18:24
on 2 lines, something like this ;) https://jsfiddle.net/sf7peykx/
tin kind)) - Tierra_Wolff commented on July 2nd 19 at 18:27
why are there else? and you would be at least some amount of money that whenever the Chihuahua not to enter this ifram https://jsfiddle.net/sf7peykx/1/ and anyway, what does YouTube iframes, it is not clear - caleb_Stehr commented on July 2nd 19 at 18:30
: Blah.If you do everything for someone, then tries to work))) I just found the option in what direction to look.
else stupid to remove when you scroll up. The author of XS where the video is taken.YouTube, for example. - caleb_Stehr commented on July 2nd 19 at 18:33
: why delete downloaded videos? so that when you scroll down again to add it?) just tripping a bit, sorry)) - caleb_Stehr commented on July 2nd 19 at 18:36
Perhaps this example degrades the idea of accelerating the operation of the site, it is necessary to make so that video is loaded only once (using the video tag), and then taken from cache. - caleb_Stehr commented on July 2nd 19 at 18:39
: and nao to only do the download, and not adding to the container, there is no ajax or similar technologies in any way... - caleb_Stehr commented on July 2nd 19 at 18:42

Find more questions by tags AJAXmp4JavaScript