How to put video as background image with no lag?

PenguinManiac · Aug 11, 2017

Some websites, like PayPal, have started to use videos as their background, which makes for a lively (and lovely, I'd say) homepage that is assured to make a sense of trust grow in its users.
Still...how did they manage to make it run without lag? It sounds like a daunting task to me, considering even simple CSS effects can cause major slowdowns, but a freaking video doesn't. What sorcery is this?

VirtuBox · Aug 11, 2017

Paypal just use video with a very high compression ratio and a low resolution (1600x900). But the video has been encoded by handbrake, a free video converter.
Here on of the video used in background : https://www.paypalobjects.com/digit.../na/us/what-can-paypal-do/videos/short/02.mp4

ClintAnthony · Oct 29, 2017

You can use

Code:

div

which has

Code:

img

tag inside of it and set the

Code:

z-index

into negative so that the other element will overlap the image.

Base on my experience, you need to covert the video into possible smaller size. What I mean by this is that convert into lower size but not too much so that you will not lose the quality of the video.

And another thing, if you want your video to be in the background and play it without any lag, use jquery and load the content of the page first before opening it, so when your visitor open your page the video will play continously.

How to put video as background image with no lag?

PenguinManiac

Member

VirtuBox

Well-known member

PenguinManiac

Member

ClintAnthony

New member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud