Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Arash Emadi
Arash Emadi
10,002 Points

Why doesn't my slideshow work ONLY on Internet Explorer while the demo slideshow works fine on IE?

Hi everyone.

I'm working on a website with YooTheme's new VENICE template (On Joomla). The odd thing that I faced today was, the home slideshow works perfectly fine on all browsers, but when you open up the homepage on IE, you cannot see the embedded youtube video while all other youtube videos (in the grid below) work perfectly fine. I tried to see if the same problem exists on the template's demo on IE, but it works perfectly fine on all browsers. I don't know where this problem is coming from. I can use some help. Thanks in advance.

NOTE: this problem only occurs in IE, not other browsers.

My Website: http://sama.tv/newsamatv/

Template Demo: http://yootheme.com/demo/joomla/venice

1 Answer

Jacky Giang
Jacky Giang
10,596 Points
Jacky Giang
Jacky Giang
10,596 Points

Hi Arash,

I don't have the full answer but here are some things I found when accessing your website via IE.

IE's tracking protection prevents the video playback. The 'no symbol' to the left of the refresh icon in the address bar is indicative of this service being active. After clicking it and allowing the content, I was able to view short frames of the video... however, only while moving between slides.

So, the next problems are HTML/CSS related--There are two. First, the theme's default background image is covering your video. Delete the div containing the background image on line 101 of your HTML:

HTML (line 101) 
<!-- REMOVE THIS -->
<div class="uk-cover-background uk-position-cover uk-hidden-notouch" style='background-image: url("/newsamatv/images/yootheme/demo/default/home_fullscreen_image.jpg");'></div>

Second, it seems like IE renders the translate value differently than other browsers. For the x-position, positive values move the content to the left of origin and vice versa for negative values. I changed the positive to a negative value.

CSS in theme-b4ff78f7.css (line 105)
/* changed translate(50%, -50%) to translate(-50%, -50%) */
[data-uk-cover] {
...
transform: translate(-50%, -50%);
}

I'm not too sure how to disable IE's tracking protection for all your visitors, and I'm not too sure how you'd go about loading a browser specific CSS file... But, hopefully this is a start!

All the best!

Arash Emadi
Arash Emadi
10,002 Points

Hello Jacky,

Thanks for your response. I think IE's protection was only on for you because I didn't have it on. So I think that's not the problem. I inserted the code you sent me to the Custom CSS file and made it important but nothing happened. I'm having some trouble finding the specific div. I'm trying to find the file which generates this specific DIV. So thanks anyways. I'll keep you posted.