Lightbox expanded image is covered by VideoBox

**Don** · 05/22/2013, 01:30

Hello and thanks for looking and hopefully helping.

I have an image gallery using lightbox and when the images are opened in the full size view they are behind a youtube video I have in the right column.
So the video covers the image they expanded and I am not sure how to fix this.

I have only found this to happen in Internet Explorer
I am on a Mac and am not sure which IE is causing this.
Safari and Firefox seem to be working fine on my Mac.

I also tried the youtube module hoping that would help but it did not.
The gallery is in the main column and the video is in the right column.

Here is a link if you would like to see what I am talking about http://sayitglobal.com/index.php/gallery.html
Any help would be appreciated.

Thanks
Don

**Rian** · 05/22/2013, 15:44

I tested with IE9 on windows 7 on two computers and the video covers the image. The flash player is the latest version, 11.7. The issue did not exist with Chrome v26/v27 on windows 7 on one computer; strangely enough on the other older computer using Chrome v26/v27 the video overlapped, but only when it was playing. If I paused the video the images showed in the front.

I made a small test setup (holland12.com/test.html) running contao 3.0.6 and the ytvideo extension. It gave the same results.

I hope this answers your first question, I do not have the technical knowledge to help you with a fix.

**Don** · 05/22/2013, 16:39

Thank you for the additional information on the browsers.

I found a post that made this recommendation but I have no idea how to make this happen.

"You need to make the video reload. You can do this by copying the src to another variable then change the src to "" and then change the src again to the variable you saved the original src in."

If there is anyone who could help me with this I would appreciate it.

Thanks for looking and helping.
Hopefully someone has run across this and has a simple solution.

**Rian** · 05/23/2013, 03:15

I noticed on the German board a different issue with video and IE9. Their explanation was that IE9 used default flash where all the other browsers used HTML5 video format. I therefore temporarily uninstalled the Adobe flash player. The result was that in IE9 the image now nicely overlaps the video. Also on your site. In IE9 I have the alternative codecs in HTML5 media elements enabled.

According to the same German board offering only the flash format to IE9 solved their issue. Note that I have not been able to test this. In order to do so they used the agentfilter extension to create page layouts that only offered flash to IE9. The other browsers got HTML5 video formats. I could not that quickly figure out how to use this extension, but if you do then I am quite willing to run a test.

**Don** · 05/23/2013, 18:15

Thank you for that information.

The way I understand what you are saying is that individual computers need to make the adjustment for flash and html5. If this is the case then I will need to do something else.

Is there a way to have a image for the video and then when they click on the image the youtube video comes up in Lightbox? And would this make a difference.

I am going to explore this but if anyone knows of a way to do this I would appreciate some direction.

Don

**Rian** · 05/24/2013, 00:40

What I am saying is that IE9 defaults to flash where it also supports HTML5. In all the tests that I did with IE9/Flash the video overlapped the image. You should set your player to default to HTML5 when the browser supports it.

An option is to use embedded youtube HTML code and add the html5=1 in the src attribute of the iframe.
<iframe width="240" height="160" src="http://www.youtube.com/embed/eKDPnhy87Rg?html5=1"</iframe>
This should force the player to default to HTML5.

I tested this on my test-site but since you removed the video I could not test it on yours. A more granular solution is that you use the agentfilter extension to determine which browser is being used. You can then offer the appropriate HTML code/player for that browser.

**Don** · 05/24/2013, 01:49

Rian

That's great - thanks so much for your time and suggestions.
Don

**Don** · 06/04/2013, 19:11

Hello Rian,

I tried what you said and on my Mac it works fine. I plan on viewing it on a PC tomorrow so I will let you know if it works.

If you have a chance can you check your computer? Thanks so much and I hope this works.

Links to the two pages I put it on.
http://www.sayitglobal.com/index.php/gallery.html
http://www.sayitglobal.com/index.php/de ... lains.html