pupunzi / jquery.mb.YTPlayer

use a custom yutube player for a video as background on jQuery framework
https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html
1.32k stars 429 forks source link

background-image: url(undefined); #391

Closed purdierogers closed 6 years ago

purdierogers commented 6 years ago

Hey Pupunzi, great video player!

Unfortunately, for this project, I am using: jquery.mb.YTPlayer 01-07-2015. And cannot update jQuery to 3.0 due to it's an older site. I am using 1.11.2

This issue is after the video finishes, I get a greyed-out YTPlayer covering the element.

Here is the DevTools inspect styles:

element.style { background: url(undefined) center center / cover rgba(0, 0, 0, 0.5); background-image: url(undefined); ... }

What I need is the background-image: url(undefined); to be updated to background-image: url('imgs/home/Hero_banner_1920x1080.jpg');

If I do this manually (add the URL) through DevTools, It works perfectly.

I believe the jquery.mb.YTPlayer.js controlling this style, but cannot find a way to override.

For reference: containment:'#home', useOnMobile:true, autoPlay:true, loop:false, showControls:true, showYTLogo: false, mute:false, startAt:0, opacity:1, optimizeDisplay:false

Thanks much! Scott

purdierogers commented 6 years ago

Here is the URL for the video I am referring too.

http://purdierogers.com/index-v.html

You can see at the end of the video, the background comes up briefly, then is replaced by a grey overlay.

Thank again,

pupunzi commented 6 years ago

Hi Scott, You should install the latest YTPlayer version replacing the CSS folder too. It works fine with jQuery 1.11 too. Download it from here: https://github.com/pupunzi/jquery.mb.YTPlayer/archive/3.2.5.zip and install it. Let me know if the problem persists.

All the best, Matteo

purdierogers commented 6 years ago

Hey Matteo, Still having the same issue after updating. Below is the issue as explained previously:

This issue is after the video finishes, I get a greyed-out YTPlayer covering the element.

DevTools inspect styles: element.style { background: url(undefined) center center / cover rgba(0, 0, 0, 0.5); ... }

What I woukd like is: background: url('imgs/home/Hero_banner_1920x1080.jpg') center center / cover rgba(0, 0, 0, 0.5);

If I do this manually (add the URL) through DevTools, It works perfectly. But I cannot figure out what is computing 'undefined'.

NEW URL: http://purdierogers.com/index-v2.html

The good news is that the 'playOnlyIfVisible: true' works great now.

Thanks in Advance, Scott

pupunzi commented 6 years ago

Hi Scott, can you try downloading the master copy and check if that issue has been solved? https://github.com/pupunzi/jquery.mb.YTPlayer/archive/master.zip

purdierogers commented 6 years ago

I replaced the .css and .js from both 3.2.5 and the Master.zip and still having the same issue.

Any other ideas?

Thanks, Scott

pupunzi commented 6 years ago

Hi Scott, from the source code of your page I can see that the build (7244) is not the last one (7254):

file: jquery.mb.YTPlayer.src.js last modified: 16/03/18 20.01 Version: 3.2.5 Build: 7244

On the master file the build is:

file: jquery.mb.YTPlayer.src.js last modified: 16/03/18 20.01 Version: 3.2.5 Build: 7254

Are you testing it on a local instance?

pupunzi commented 6 years ago

Hi Scott, the last commit should have solved this issue. Download the master (https://github.com/pupunzi/jquery.mb.YTPlayer/archive/master.zip) and test it.

purdierogers commented 6 years ago

I am testing on a local and webserver. I have updated both to 7254 and still have the issue. But alas, non funziona.

FYI, I get an Alert if I use the .src version, that "I cannot use the .src version". But the Dist version is 7254 as well...

Perplexing. Again thanks for your help.

pupunzi commented 6 years ago

Hi Scott, The last commit should have solved this issue. Download the latest master (built n° 7260) https://github.com/pupunzi/jquery.mb.YTPlayer/archive/master.zip and test it.

westaussie commented 6 years ago

Noticed the same thing and can confirm that the latest build from @pupunzi resolves it :-) Nice!

purdierogers commented 6 years ago

The latest build fixed the issue! Thank you for your help and quick responses @pupunzi.

Scott Rockwell

On Mon, Sep 24, 2018 at 12:28 AM jquery.mb.components < notifications@github.com> wrote:

Closed #391 https://github.com/pupunzi/jquery.mb.YTPlayer/issues/391.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/pupunzi/jquery.mb.YTPlayer/issues/391#event-1862454843, or mute the thread https://github.com/notifications/unsubscribe-auth/AMD-xMEciB_iWs0uRQh_TVrAg_zUrMKyks5ueIm1gaJpZM4Wn96W .

--

SCOTT ROCKWELL • PURDIE ROGERS

2288 W. Commodore Way, Suite 200 Seattle, WA 98199

T 206.628.7700 EXT 23 | F 206.628.2818

DIGITAL & TRADITIONAL MARKETING http://www.purdierogers.com