blakewilson / vidbg Goto Github PK

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