How to make background video website like Apple?

How to make video background like on the Apple section Apple Tv+. At the bottom of it background and text on it, and it loaded quickly on all devices whether it be Iphone, Android or Desktop. That it was loaded in Safari in Chrome, get a fast sinker and not much the device, loaded quickly. How? Please help.
March 19th 20 at 08:36
1 answer
March 19th 20 at 08:38
Solution
<video autoplay loop>
 <source src="video/video2.mp4" type="video/mp4">
 <source src="video/video1.webm" type="video/webm">
 <source src="video/video3.ogv" type="video/ogg"/>
</video>


video{
position:fixed;
z-index:-1;
min-width:100%;
min-height:100%;
overflow:hidden;
}


quickly, efficiently, and sinker not much device here depends on what video compression is, how much the weight of the file. the speed of the Internet
Cyril, and it will be loaded autoplan on ios devices in Safari? - lester.Kuh commented on March 19th 20 at 08:41
This will work:
<video preload="metadata" muted="muted" autoplay playsinline loop></video>
- lester.Kuh commented on March 19th 20 at 08:44
? - lester.Kuh commented on March 19th 20 at 08:47
@lester.Kuh,
<video preload="metadata" muted="muted" autoplay playsinline loop></video>


What I wrote only added 2 of the parameter preload="metadata" - "This attribute is ignored if autoplay is set." - constantin.Metz24 commented on March 19th 20 at 08:50
@lester.Kuh, on ios 10 and later - Lilly.Wolf24 commented on March 19th 20 at 08:53
<video muted loop playsinline class="mediaobject-ios-inline-video-mediaobject-element" src="https://www.apple.com/105/media/us/apple-tv-plus/2019/c5a05301_ed18_47f6_a7f8_bba47bf3e0f4/anim/sizzle-reel/large.mp4" style="width: 100%; height: auto; visibility: visible;"></video>


In the end, so it will work? - lester.Kuh commented on March 19th 20 at 08:56
@lester.Kuh, Purely theoretically Yes, but you need to test - constantin.Metz24 commented on March 19th 20 at 08:59
why 2ะบ19 webm and ogv? - Silas54 commented on March 19th 20 at 09:02
The guys here, - lester.Kuh commented on March 19th 20 at 09:05
https://codepen.io/dudleystorey/pen/kkYawX?editors=1000 - lester.Kuh commented on March 19th 20 at 09:08

Find more questions by tags Web DevelopmentVideoHTMLJavaScriptCSS