blakewilson / vidbg Goto Github PK
View Code? Open in Web Editor NEWA minimal vanilla JavaScript video background plugin.
Home Page: https://www.npmjs.com/package/vidbg.js
License: MIT License
A minimal vanilla JavaScript video background plugin.
Home Page: https://www.npmjs.com/package/vidbg.js
License: MIT License
i.e. If I open a window with a full-width (and nearly full-height) video background and maximize it on a widescreen monitor, the video will not resize to fit full width, instead, the original background image shows through on the left and right side.
I'm not sure if this is the same or the opposite problem as #1.
Sometimes In Chrome and Safari I see error "Autoplay is not supported", it's a random error.. How can I prevent this?
Edge 18 says autoplay is not supported
in the console. In the browser settings I have Media Autoplay set to "allow". Background video plays in Edge 80+ and in other major browsers as far as I can tell.
Can you please add back in the background positioning we had before? I dont want my video always centered.
Thank you !
Hi Blake,
I wrote on a closed issue so not sure whether you see those anymore so though I'd try my luck here. Original message below:
Great plugin BTW :)
I am aware of the autoplay issue in Safari if the video is not muted. The default option is for the video to be muted but when inspecting the element, I can see that muted is not being added therefore it isn't working in Safari.
Any ideas?
overlay: false, is not working
Is there an option to have different video sources for different breakpoints?
Similar to the picture tag in combination with art directing for images.
Is there a way to make the video work on ipads?
TypeError
Cannot set property 'vidbg' of undefined
An error is reported in the introduction
Hey Blake, I'm wondering if there is an NPM package of this script?
Hi
Thank you for this beautifull and fast script. Finally a script that has video position top bottom correctly implemented as most scripts center the video loosing all the action in the bottom. This script allows to set a start point for the video so one can see the video from the bottom point which is great.
I found unfortunately one issue.
If you create a div box width=100% and height= 400px and set a video to the background of that box.
It does not matter if you turn off the video resize function within the script true or false as when the window hits a certain point f.e. mobiles work on (below 980px) The video does not keep the height starts resizing and creates in ie black borders (in other browsers you get white area's) above and below the video.
In my opinion the video should keep the height of the box and center (left right) (top bottom) the video within.
You can see a screenshot here http://i.imgur.com/Htdn4ox.png
Can you fix this?
Thanks !
We discovered that the overlay doesn't work on Safari.
On line 338 you're setting the z-index to -1, I removed this as it seems you don't really need it and it solved the issue. I've tested on the latest versions of Chrome, Firefox, Edge and Safari and it seems to work fine.
I also replaced the eval encoded image with a plain rgba semi transparent background color because the project we're working on calls for that but also because eval is evil and I usually set maldetect to nab those things since they're usually used in malware. Would it maybe make more sense to just package that image up with the plugin instead of doing it this way? Another issue with that method is this app we're building needs to be able to be ran locally and not as a traditional website all the time so all of the assets have to be packaged up locally, seems to me like it's just one more external call that doesn't need to be.
I recently noticed that the plugin still plays the video on android devices instead of displaying the poster image.
Hi.
How can i back to poster image when i make the video play for one time with loop:false;
i want to back to poster image after the video end
thanks so much
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.