search

stamat / youtube-background

ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links.
https://stamat.github.io/youtube-background/
MIT License
176 stars 54 forks source link

Video resizing no longer working #8

Closed Kenton419 closed 4 years ago

Kenton419 commented 4 years ago

First of all thanks for making this plugin, it has been working great for me for months now!

However, suddenly my websites background video is no longer full screen, but is instead loading only full height of the enclosing div, and no longer covering the full width. It appears to load on the right side of the container. I don't think it is related to my site styling, as the demo page for this on your site is now loading off to the right side as well.
https://frontbackend.com/simple-jquery-plugin-for-embedding-youtube-videos-as-a-cover-background

Is this a change in the YouTube video API breaking this, or something that could be resolved? Thanks for your time.

stamat commented 4 years ago

I'll check it out right away! Thanks for reporting this man! <3

stamat commented 4 years ago

Alright @Kenton419 something definitely changed, since it's not working on any of my production sites, which is really annoying... Probably the YT API clears all of the injected css via the script... I can probably override this by waiting for the video to initialise in the background and then assign the css properties and then do that fade in effect which is pending...

stamat commented 4 years ago

@Kenton419 the issue was that the YT API changed the names of the variables within their event object, making the script fail to find the actual target and assign the css properties to it. I've fixed it, I'll do some cleanup and ping you when I post a new version of the code!

Kenton419 commented 4 years ago

Thanks so much for the quick response. I appreciate it and look forward to the updates.

insad commented 4 years ago

in "onVideoPlayerReady":

"$(e.target.a)" must become "$(e.target.f)"

stamat commented 4 years ago

@insad in order to ensure the longevity of this solution ( if they try change this again ) I added a for in loop to find the iFrame DOM Object, I'm currently objectifying this code so it will be easier to manage in future!

stamat commented 4 years ago

@Kenton419, for the time being use @insad 's suggestion - if you are in a hurry. I got a bit tangled up in refactoring this bunch of code so I'll finish it in approx 12 - 16 hours!

stamat commented 4 years ago

@Kenton419 sorry for the wait man! Had to take care of my grandmother, corona... Anyway, the issue has been solved and the code completely refactored in the latest version. Check it out!

I'm always happy to fix and improve! Thanks for submitting this!