Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Video Not Rendering Properly in Internet Explorer


My videos are working perfectly in Firefox and Chrome, however they are not rendering properly in Internet Explorer. I have a Joomla site (with K2) and I'm using the AllVideos plugin that uses JW Player. In the configuration for both JW Player and AllVideos, I have chosen the responsive layout. However, in IE, the video does not stretch to the full dimensions. When I re-size it, it gradually disappears into the top left corner, until it is completely gone. It just displays as a black screen but the video is still running, the controls are still there and the audio works. Has anyone else had anything like this happen before? Any ideas on how to fix it? I've tried so many things, and nothing has worked so far.

5 Community Answers

George

JW Player Support Agent  
0 rated :

Sounds like a CSS issue, something is pushing the video offscreen

s...

User  
0 rated :

Hmm.. that might be it. The video div has a top: 0; left: 0; and when I add the !important tag to those two styles it gets even worse (more pushed in the top left corner). When I remove them altogether, nothing changes. Can you take a look at my code and see if you notice anything? Here's my code followed by my CSS:

HTML:
<div class="itemVideoBlock span8">
<span class="">
<div class="avPlayerWrapper avVideo">
<div class="avPlayerContainer">
<div id="AVPlayerID_0_27e94b9c764d9e94c5a673e93f46e7a2" class="avPlayerBlock" style="width:100%;height:100%;">
<div id="avID_AVPlayerID_0_27e94b9c764d9e94c5a673e93f46e7a2" style="width:400px;height:300px;" title="JoomlaWorks AllVideos Player"></div>
<script type="text/javascript">
jwplayer('avID_AVPlayerID_0_27e94b9c764d9e94c5a673e93f46e7a2').setup({
'file': 'https://MYURL.COM.mp4',
'image': 'https://MYURL.COM.jpg',
'height': '300',
'width': '400',
'autostart': 'true',
'repeat': 'false',
'controls': '1'
});
</script>
</div>
</div>
</div>
</span>
</div>

CSS:
/* General */
.avPlayerWrapper div,
.avPlayerWrapper iframe,
.avPlayerWrapper object,
.avPlayerWrapper embed {outline:0;}

/* Responsive Layout */
.avPlayerWrapper {display:block;text-align:center;clear:both;}
.avPlayerWrapper .avPlayerContainer {display:block;padding:0;margin:0 auto;}

/* Video container styling only */
.avVideo .avPlayerContainer .avPlayerBlock {width:100%!important;position:relative!important;padding:0 0 56% 0!important;}
.avVideo .avPlayerContainer .avPlayerBlock iframe,
.avVideo .avPlayerContainer .avPlayerBlock object,
.avVideo .avPlayerContainer .avPlayerBlock embed,
.avVideo .avPlayerContainer .avPlayerBlock video,
.avVideo .avPlayerContainer .avPlayerBlock > div {position:absolute!important;top:0;left:0;min-width:320px!important;width:100%!important;height:100%!important;}

George

JW Player Support Agent  
0 rated :

Do you have a live web page that shows the issue?

s...

User  
0 rated :

Yes. Here's an example: http://www.appianmedia.org/media-lib/videos/item/409-peter-s-fish-30.html

Alex

JW Player Support Agent  
0 rated :

Hi there,

It looks like line 25 of template.css is causing the issue. If you inspect the element in IE 11’s Developer Tools and uncheck all of the styles for that block, the video appears normally.

.avVideo .avPlayerContainer .avPlayerBlock > div {position:absolute!important;top:0;left:0;min-width:320px!important;width:100%!important;height:100%!important;}

Please let me know if you need any more help or have any other questions.

Thank you!

This question has received the maximum number of answers.