CSS hack patch is not available with videojs-4.7.3 on IE7

[t2y]

@doublex made css hack patch for IE6-IE7 on #539. This hack saved me and it works at least with videojs-4.5.1 I confirmed.

Now I upgraded to videojs-4.7.3 and tried to apply css hack for IE7, but the style was broken as below. I'm not sure about css, so is there some workaround?

References:

• Hack to support IE6 + IE7 #539
• IE6-IE8 font issue #508

[mmcc]

From the screenshot, it looks to me like none of the VJS styles are being applied at all. I made a quick example showing it working. It looks like the styles from the fix are making the big play button look wonky, but that should at least get you started.

[t2y]

Thank you for adjusting css.
I tried to load the player on IE7 using your css, but the issue is still occurred. I made a jsbin with my site. Could you confirm this on your IE7?

http://jsbin.com/roqoda/1/edit

[mmcc]

You've got the CSS include commented out, so the base CSS isn't included. The workaround that @doublex mentioned is meant to be used in conjunction with the Videojs default skin.

[t2y]

Oh, got it. I've included base CSS like this, but still it seems same. Is there something wrong?

http://jsbin.com/favujo/1/edit

[mmcc]

Ah it appears you are correct, just pulled up an IE7 VM and it does not seem to be working It appears the issue is that the video element isn't getting moved to the wrapper div, but I have no idea off the top of my head as to what might have changed to cause this.

This is a bit of a conundrum, because on one hand we deprecated support for IE6-7 for exactly this reason, but on the other hand we don't want to break things for the group of people still actively making it work. If you want to help hunt down the cause and fix it, we'll accept a PR to keep things working.

Just out of curiosity, what's your reason for continuing to support IE6-7?

[t2y]

Thank you for confirming detail.

we deprecated support for IE6-7 for exactly this reason

I understand your support policy, and I think it's appropriate, too. I'm not good at css, so I ask this hack to my coworkers. Then, could you open this issue to share others as same as me.

Just out of curiosity, what's your reason for continuing to support IE6-7?

Our site supports IE8 with document mode IE7 (it means IE7 actually, we cannot use IE8 native since its performance issue). To be honest, I'm very annoying to support IE8(IE7), but our customer requests that. 😢

  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

[mmcc]

Totally understand the frustration, that sounds like a really rough customer request. :( This does not seem to be a CSS issue, for what it's worth. Since it looks like Video.js is never able to create the wrapper div at all, I'm going to go out on a limb and assume something's changed on the JS side of things.

I'll reopen this for a few days and see if someone else can take a look, but it might be best to simply pin yourself to the last known working version. I think the number of folks fighting the IE7 war is dwindling by the day :(

[doublex]

Fix IE7
#1495

[alexrqs]

hi @t2y I found 2 ways to fix/hack this one is pure css

#example_video_1{ position:relative }
.vjs-poster{ position: absolute; top: 0; left:0; width:640px; height:264px; }

as you can see http://jsbin.com/fubaqiguwice/1/edit here

the other one is js not sure how are you js skills so let me know if this css perform the magic trick I test this on browserstack.com it may not work for you so, let me know

[t2y]

@doublex Thank you for making again!

I applied #1495 patch and video-js-ie7.css, then I could see cool player on IE7 as below. 😄

The control panel is a little blurred, but I don't feel so bad.

[t2y]

@alexrqs According to my previous comment, I could show correctly. So I haven't tried your approach, but I want to say thank you for suggesting.

[mmcc]

@t2y it looks like the blurriness is most likely caused by the text shadow. I'd suggest adjusting your stylesheet to disable that and it should be much clearer. Glad you got this fixed! 👍

[t2y]

According to http://www.w3schools.com/cssref/css3_pr_text-shadow.asp, text-shadow property is available after IE10. I'm not sure whether text-shadow causes blurriness or not.

I tried to modify some css properties: font-family, font-weight, font-size and so on. Then, I think this settings is more clearly than previous. Meiryo is default system font on Japanese Windows.

--- orig-video-js-ie7.css   2014-09-10 07:43:32.252095530 +0900
+++ video-js-ie7.css    2014-09-17 23:49:58.710454399 +0900
@@ -1,6 +1,18 @@
 .vjs-default-skin .vjs-control-bar {
   *background-color: #07141e;
 }
+.vjs-default-skin .vjs-current-time {
+  *font-family: Meiryo;
+  *font-size: 1.2em;
+}
+.vjs-default-skin .vjs-duration {
+  *font-family: Meiryo;
+  *font-size: 1.2em;
+}
+.vjs-time-divider {
+  *font-family: Meiryo;
+  *font-size: 1.2em;
+}
 .vjs-default-skin .vjs-play-control {
   *font-family: VideoJS;
   *line-height: 3;

[mmcc]

You're totally right, text-shadow definitely doesn't make sense as the culprit here. The controls don't look like that for me in IE8, so I assume this has something to do with compatibility mode somehow?

[heff]

Closed by #1542