Latest trend in web design - JQuery.videobg.js
Web design it's like fashion trends - minus the runway, it has different themes every season. These themes are very much influenced by the current technologies such as HTML5, CSS3 etc..
So what's the latest trend in web design in 2015-2016 ? The answer is Video Background !
Some of the the more prominent sites that has adopted this new trends include - Paypal, Focus Lab and Ingenious Lab .
Doing this is simple , you can leverage on jquery.videobg js plugin. Bear in mind that not all browsers supports mp4 format and to overcome this limitation, the plugin allows you to specify four different types of format including mp4, ogg, webm and jpg (for browsers that do not support video).
Some of the limitations include :
1. It's worth nothing that iOS disabled auto-play for video, in this case your trendy looking video backgroud will fall back to jpg image.
2. Keep your video size between 500KB-1.2MB to achieve reasonable download speed for your website
3. You may use https://cloudconvert.com/mp4-to-ogg to covert your mp4 .
jquery.videobg can be yanked from https://github.com/sydlawrence/jquery.videoBG
For consultancy on mobile solutions or mobile apps contact hey@inglab.com.my
So what's the latest trend in web design in 2015-2016 ? The answer is Video Background !
Some of the the more prominent sites that has adopted this new trends include - Paypal, Focus Lab and Ingenious Lab .
Doing this is simple , you can leverage on jquery.videobg js plugin. Bear in mind that not all browsers supports mp4 format and to overcome this limitation, the plugin allows you to specify four different types of format including mp4, ogg, webm and jpg (for browsers that do not support video).
Some of the limitations include :
1. It's worth nothing that iOS disabled auto-play for video, in this case your trendy looking video backgroud will fall back to jpg image.
2. Keep your video size between 500KB-1.2MB to achieve reasonable download speed for your website
3. You may use https://cloudconvert.com/mp4-to-ogg to covert your mp4 .
jquery.videobg can be yanked from https://github.com/sydlawrence/jquery.videoBG
BROWSER SUPPORT
| Video | Image | |
|---|---|---|
| Firefox 4 (the best experience) | Yes (webm) | Yes |
| Internet Explorer 9 | Yes (mp4) | Yes |
| Firefox 3.5 | Yes (ogv) | Yes |
| Chrome | Yes (webm/mp4) | Yes |
| Safari | Yes (mp4) | Yes |
| Opera 10.5+ | Yes (ogv) | Yes |
| Internet Explorer 8 | No | Yes |
| Internet Explorer 7 | No | Yes |
| Android Browser | No | Yes |
| Mobile Safari | Does not modify default behaviour | |
| Older Browsers that support position:fixed | No | Yes |
| Archaic browsers | Does not modify default behaviour | |
For consultancy on mobile solutions or mobile apps contact hey@inglab.com.my
Thanks for an insightful post.These tips are really helpful. Thanks a lot.Keep it up.Keep blogging.!!
ReplyDeleteBest Android App Development Company In malaysia!