Walter, I discovered yet another problem with ScriptyLightBox2 today. Unfortunately, having the latest version of Protaculous does not fix this problem.
The problem appears on pages where I display videos above the existing page via ScriptyLightBox2. The videos open and play perfectly. The problem is that when you click the close box, only the “frame around the video” vanishes, and the video remains there and continues to play. Sometimes if I scroll around the page and click like mad long enough it will go away. But it most cases, the video won’t go away until I double-click it (which makes it fill the screen) and then I pause or stop it.
I verified this problem exists in IE6 & IE7 & IE8 running under WinXP and also in IE9 running under Windows7. No problem in Chrome, Safari or FireFox on the Mac. And no problem in Chrome, Safari or FireFox on Windows. It’s only IE on Windows.
Click on either of the WindowsMedia buttons to see the problem in IE.
Your thoughts would be appreciated.
Wow. I’m not sure how this could be possible. When I detect a click on the close button, I remove the entire player from the DOM. It doesn’t get more explicit than that in terms of stopping a movie. This sounds like a huge IE bug. The thing is, I’m not all that sure what else I could do to get the Flash player out of the page.
It’s pretty clear that it is a bug exclusive to IE, Walter, but the problem I see is that it spans all versions of IE, from pathetic version 6 all the way to the current version 9.
Furthermore, if I click the close box BEFORE the video starts to play, it closes perfectly every single time in IE! It’s only when the video fully loads and then starts to Play that clicking the Close box only causes the “frame” around the video to vanish. How would this be explained?
Flash and other plug-in-based content (all platforms) cuts a hole right through the browser and replaces the browser content with its own playback mechanism. It seems that removing the parent element does not remove the plug-in children of that element from the screen in IE, which is why the movie remains and the border (the parent element) disappears. In looking at the Action, I suppose I could try issuing a Stop() command on the video, then delete it directly, then remove the outer frame element.
It’s pretty clear that it is a bug exclusive to IE, Walter, but the problem I see is that it spans all versions of IE, from pathetic version 6 all the way to the current version 9.
Furthermore, if I click the close box BEFORE the video starts to play, it closes perfectly every single time in IE! It’s only when the video fully loads and then starts to Play that clicking the Close box only causes the “frame” around the video to vanish. How would this be explained?
Walter, thank you for that modification. I tested that page in Chrome, Firefox, and Safari for Mac and Windows, and IE6 through IE9 on Windows. IE9 on Windows7 displays the video content AND closes it as perfectly as on the Mac, ditto for Firefox and Chrome on Windows too. However, IE6 and IE7 and IE8 won’t close the frame at all now, even if I click the close box very quickly after opening the content, and before the video even starts to play.
If it were only IE6 or IE7 that had this problem, I would not beat myself up about it. But IE8 is an important browser because it’s the last version that can run on WinXP. And there are still a lot of folks who use XP, especially here in Japan. So I need to support IE8.
One thing I noticed about IE6, IE7 and IE8 is that they all display the video frame and content a bit differently than IE9 or Firefox or Chrome or Safari. Specifically, in IE6/7/8m the horizontal scroll bar shows up, almost like the content is a bit too small to fit the frame. Perhaps that has nothing at all to do with this problem, but I wish to mention that tiny difference all the same.
All said, your fix works perfectly in IE9. But in IE6/7/8, the video content closes (and leaves a white box) but the “black frame” (including close box) freezes on-screen when you click the Close box, and you have to reload the page to get it off. (And while not important but I want to mention it anyway, in IE6 the Close box never displays at all. That was true even before your fix.)
Click on the “Play the Video!” text link there to see the video hover over the existing page. This visually does what ScriptyLightBox2 does, with the except that I like your ScriptyLightBox2 better insofar as it merely pops-up content over the existing page without “whitening” the page.
Anyway, I tested that “wistia” video in every browser. It works perfectly in every browser, including IE6. Furthermore, it even displays the Close box in IE6, unlike ScriptyLightBox2. AND, it also displays a “shadow” in IE6 too, unlike ScriptyLightbox2.
Again, I am not so worried about IE6, but the point is that whatever code that “wistia” site uses, it works across all browsers on both the Mac and PC.
Click on the “Play the Video!” text link there to see the video hover over the existing page. This visually does what ScriptyLightBox2 does, with the except that I like your ScriptyLightBox2 better insofar as it merely pops-up content over the existing page without “whitening” the page.
Anyway, I tested that “wistia” video in every browser. It works perfectly in every browser, including IE6. Furthermore, it even displays the Close box in IE6, unlike ScriptyLightBox2. AND, it also displays a “shadow” in IE6 too, unlike ScriptyLightbox2.
Again, I am not so worried about IE6, but the point is that whatever code that “wistia” site uses, it works across all browsers on both the Mac and PC.
I would appreciate hearing your thoughts.
This is FancyBox, by Cabel Sasser. I’ll take a look at how he’s doing this. But one other thing that’s apparent to me – the content is HTML5 video, probably with a Flash fallback for older browsers. Can you try using Flash video in place of WMV, and see if there’s any difference?
I’ve read through the entire source, and the only thing they are doing to clean up an iframe or embedded flash is to remove the surrounding element, just as normal SL2 does already. Same code (albeit it’s jQuery instead of Prototype).
Walter
On Feb 22, 2012, at 10:23 PM, JDW wrote:
To test a Flash video in place of the WMV, would an embedded link to a YouTube version of the video suffice?
Oh, and this is FancyBox, and Cabel wrote FancyZoom.
Walter
On Feb 22, 2012, at 10:26 PM, Walter Lee Davis wrote:
I’ve read through the entire source, and the only thing they are doing to clean up an iframe or embedded flash is to remove the surrounding element, just as normal SL2 does already. Same code (albeit it’s jQuery instead of Prototype).
Walter
On Feb 22, 2012, at 10:23 PM, JDW wrote:
To test a Flash video in place of the WMV, would an embedded link to a YouTube version of the video suffice?
Walter, here’s my page with the YouTube video (click the uppermost “QuickTime” play button):
It works fine in all browsers, including IE6. In other words, I can clear it off the screen without problem. So this shows that having an embedded player fixes the problem. The fact that Windows is coughing up its own player in the case of the WMV and MOV files seems to be why the video won’t close in IE for some reason.
Even so, despite my use of the YouTube flash video, the little Close box still won’t display in IE6, despite the fact that the “wistia” video’s Close box (which looks the same as your Close Box) displays just fine.
Well, rather than be forced to redesign my site around YouTube Flash videos, I would prefer to keep the WMV and MOV files I have right now “as is.” After about an hour of searching this afternoon, I found this site which shows off their implementations of FancyBox:
Scroll down on that page and try the following two links:
JWplayer WMV (uses SilverLight player)
WMPlayer wmv (uses Windows Media Player)
Both work in all browsers, Windows and Mac, including IE6. And the Close Box shows up in IE6 too. When I click Close, the videos close. So what is different between their implementation and yours?
Well, rather than be forced to redesign my site around YouTube Flash videos, I would prefer to keep the WMV and MOV files I have right now “as is.” After about an hour of searching this afternoon, I found this site which shows off their implementations of FancyBox:
Scroll down on that page and try the following two links:
JWplayer WMV (uses SilverLight player)
WMPlayer wmv (uses Windows Media Player)
Both work in all browsers, Windows and Mac, including IE6. And the Close Box shows up in IE6 too. When I click Close, the videos close. So what is different between their implementation and yours?
I don’t know at all what happens under the hood in jQuery when you call remove() on a DOM object. It is possible that it is doing something more elaborate (manually cleaning up nested elements within that object) that Prototype is not. I honestly don’t know why IE would allow child elements of a removed DOM element to hang around anyway, since removing the parent is like cutting down the tree – all the branches fall along with it. All I can see from reading the fancybox.js source code is that, exactly as in my implementation, the player box is given the shove with remove(). The very same code path is taken in all cases, regardless of the type of content. The primary difference is that the fancybox effect extends jQuery, so it’s jQuery.Element.remove() instead of Prototype.Element.remove(). And I can’t really do anything about that.
One more thing, you may be able to use Freeway’s Flash Video Action, just get your movie encoded into FLV format and use that (with the Action to create a controller) directly instead of WMV format. Then you wouldn’t have to worry about anything except IE6 not showing the close button. (I suspect that is a CSS issue rather than anything more sinister. IE is notoriously dense when it comes to CSS layout. I would rather not dumb-down the layout to that level, as any work-around would be pretty hacky.)
Walter, the main reason I create the dual-video setup on my site is because I once had QuickTime “MOV” files only and some Windows users complained they couldn’t see the videos and they didn’t want to install QuickTime. So I created WMV files for them and they were satisfied. But I retained the QuickTime files so iPad and iPhone users can also watch the videos too. Since Apple still stubbornly refuses to support Flash on iOS, and with the number of iOS viewers of our site continuing to grow, I need to give thought to supporting them too.
My dual-video solution gives me a bit more control than going to YouTube too. With YouTube, I have to accept YouTube branding. Plus, when the YouTube videos finish, the viewers see little thumbnails of unrelated videos popup and I don’t care to show that.
True, I could do the videos the “old way” and just Spawn a new window for the videos. But I like the ScriptyLightBox2 method of having the videos popup and hover over the existing page content. It looks more modern and very slick! But alas, I have the IE problems I’ve reported previously.
Therefore, what are your thoughts in light of this?
All I am suggesting here is for you to test whether FLV (replacing the WMV) will properly close on IEs of a “certain” age. You would still open it in a SL2 in-page popup. Take one of the WMV pages that you are currently linking to and duplicate it. Substitute a Freeway-generated Flash Video widget for the WMV player you are using and see what happens. If all goes well, you will have Windows-compatible video that will open and close in IE using SL2.
Walter
On Feb 23, 2012, at 4:17 PM, JDW wrote:
Walter, the main reason I create the dual-video setup on my site is because I once had QuickTime “MOV” files only and some Windows users complained they couldn’t see the videos and they didn’t want to install QuickTime. So I created WMV files for them and they were satisfied. But I retained the QuickTime files so iPad and iPhone users can also watch the videos too. Since Apple still stubbornly refuses to support Flash on iOS, and with the number of iOS viewers of our site continuing to grow, I need to give thought to supporting them too.
My dual-video solution gives me a bit more control than going to YouTube too. With YouTube, I have to accept YouTube branding. Plus, when the YouTube videos finish, the viewers see little thumbnails of unrelated videos popup and I don’t care to show that.
True, I could do the videos the “old way” and just Spawn a new window for the videos. But I like the ScriptyLightBox2 method of having the videos popup and hover over the existing page content. It looks more modern and very slick! But alas, I have the IE problems I’ve reported previously.
Therefore, what are your thoughts in light of this?
Mike Rancka
MacPro Solutions
8026A West Broad St.
Richmond, VA 23294
804-497-8710
email@hidden www.macprosolutions.com
We’re here to help.
Recipient of Apple’s Commitment To Excellence Award
On Feb 23, 2012, at 4:17 PM, JDW wrote:
Walter, the main reason I create the dual-video setup on my site is
because I once had QuickTime “MOV” files only and some Windows
users complained they couldn’t see the videos and they didn’t want
to install QuickTime. So I created WMV files for them and they
were satisfied. But I retained the QuickTime files so iPad and
iPhone users can also watch the videos too. Since Apple still
stubbornly refuses to support Flash on iOS, and with the number of
iOS viewers of our site continuing to grow, I need to give thought
to supporting them too.
My dual-video solution gives me a bit more control than going to
YouTube too. With YouTube, I have to accept YouTube branding.
Plus, when the YouTube videos finish, the viewers see little
thumbnails of unrelated videos popup and I don’t care to show that.
True, I could do the videos the “old way” and just Spawn a new
window for the videos. But I like the ScriptyLightBox2 method of
having the videos popup and hover over the existing page content.
It looks more modern and very slick! But alas, I have the IE
problems I’ve reported previously.
Therefore, what are your thoughts in light of this?
I know. I’m talking about using it as a fallback for Windows IE only.
My current work is using the fantastic Sublime Player, which does HTML5 for everyone and falls back really gracefully to Flash for anyone who can’t view HTML5. They’ve done such a nice job of styling all of the players to look exactly alike. Free plan is badged, but subtly and it goes away when the movie starts playing. The next step up is $99 a year, which is a total deal because you get all sorts of metrics and you can have multiple sites on a plan, and SSL if you need it.
Mike Rancka
MacPro Solutions
8026A West Broad St.
Richmond, VA 23294
804-497-8710
email@hidden www.macprosolutions.com
We’re here to help.
Recipient of Apple’s Commitment To Excellence Award
On Feb 23, 2012, at 4:17 PM, JDW wrote:
Walter, the main reason I create the dual-video setup on my site is because I once had QuickTime “MOV” files only and some Windows users complained they couldn’t see the videos and they didn’t want to install QuickTime. So I created WMV files for them and they were satisfied. But I retained the QuickTime files so iPad and iPhone users can also watch the videos too. Since Apple still stubbornly refuses to support Flash on iOS, and with the number of iOS viewers of our site continuing to grow, I need to give thought to supporting them too.
My dual-video solution gives me a bit more control than going to YouTube too. With YouTube, I have to accept YouTube branding. Plus, when the YouTube videos finish, the viewers see little thumbnails of unrelated videos popup and I don’t care to show that.
True, I could do the videos the “old way” and just Spawn a new window for the videos. But I like the ScriptyLightBox2 method of having the videos popup and hover over the existing page content. It looks more modern and very slick! But alas, I have the IE problems I’ve reported previously.
Therefore, what are your thoughts in light of this?
Walter, I need some hand-holding here. I’ve long run from Flash like the plague so I am not sure what I need to do. What Action in Freeway do I need to use, and how do I use it?
Are you saying I should sketch an HTML box, then import an “SWF” video file into that box, then change the “Item Output Settings” tab in the Inspector (which presents Flash video specific controls)? Or are you also suggesting that I add the “Flash Extras” action to that HTML box too?