I absolutely love the [bl id=”2769″]Envira Gallery system[/bl] but just recently I noticed that one of my video galleries didn’t work very well on Internet Explorer, on one of my sites. Here’s the fix.
The Gallery in question was a video gallery consisting of various YouTube videos.
I needed to display the titles so I used the “Caption” theme to display the gallery, and set it to two columns.
This worked beautifully in Chrome and Firefox but didn’t behave properly in Internet Explorer.
Here’s how it was supposed to look: 
But in Internet Explorer, the thumbnail images of the videos failed to resize themselves and were oversized and overlapping, looking pretty ugly!
Not only that, when a video thumbnail is clicked, a lightbox view opens up, showing all of the thumbnails in the gallery across the top or bottom, with the video playing in the centre. It’s a very attractive way to embed videos in a website, and it works beautifully in Chrome and Firefox.
Here’s how that looks in Chrome/Firefox:
But once again, I was seeing a problem with Internet Explorer. The video was not visible, though it did play, as the sound was audible.
How to fix Envira gallery with Internet Explorer
Curioously, I have set up a similar gallery on a different site, and this worked in all browsers, so I’m assuming that there is a conflict somewhere.
Fortunately, the fix for both of these issues is very simple, and only involves adding a couple of lines of CSS to your theme’s stylesheet.
Here’s the css code for you to copy and paste into your own CSS, to fix the issue.