Div has black background on ios5

Question

I'm making a page where you have a div, a video array, and buttons. The div in question is placed before the <video> tag, and shows up black instead of having the background-image that it is set to. I've tried putting the div in different locations, linking the image in CSS or directly, fading the <video> in and out, and even putting a poster image for the video so it's not blank. Nothing.

Can I get some help, this has to be done on monday (along with five other things), so I'm very rushed for time.

the javascript is

<div id="wrapper">
<div id="MyT" class="norm"></div>
    <div id="bigPic">
    <video id="myVid" class="normal" type="m4v" showlogo="false" height="768" width="1024" poster="images/IMG_08532.jpg"/>

</div>
<div class="buttons">
        <div id="content">
            <div class='slider'><div class="control"><div class="progress"><span class="timeBar"></span></div></div></div>
            <ul class='thumbs'>
              <div style="top:0px;"><li rel='1'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:128px;"><li rel='2'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
              <div style="top:256px;"<li rel='3'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:384px;"><li rel='4'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
              <div style="top:512px;"><li rel='5'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:640px;"><li rel='6'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
            </ul>
       </div>
  </div>
</div>

the [relevant] CSS is

  #bigPic { position:absolute; background-image:url(images/IMG_08532.jpg); margin-left:-8px; margin-top:-16px; height:768px; width:1024px; } #wrapper { width: 1024px; height: 768px; } #myVid{ position:absolute; top:0; left:0; margin:none; padding:none; } 

and then the html is

 <div id="wrapper"> <div id="MyT" class="norm"></div> <div id="bigPic"> <video id="myVid" class="normal" type="m4v" showlogo="false" height="768" width="1024" poster="images/IMG_08532.jpg"/> </div> <div class="buttons"> <div id="content"> <div class='slider'><div class="control"><div class="progress"><span class="timeBar"></span></div></div></div> <ul class='thumbs'> <div style="top:0px;"><li rel='1'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div> <div style="top:128px;"><li rel='2'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div> <div style="top:256px;"<li rel='3'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div> <div style="top:384px;"><li rel='4'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div> <div style="top:512px;"><li rel='5'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div> <div style="top:640px;"><li rel='6'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div> </ul> </div> </div> </div> 

EDIT

It's not the video, I've tried a few things were it's invisible(and also faded out) and then it comes back in on click. It seems that it's actually the the div "myT",but the image links work fine when they are on other divs.

Please someone help!

Answer 1

I guess the big black is the "video" as ios shows it. What I would try is something like: have the div after (not around) the video, with absolute positioning move it over the video. And onclick just hide it. Unfortunatelly you'll have to click again on the video to start, because apple doesn't let you do it from javascript

Answer 2

Since you've tried a number of things like setting the <video> poster and setting the image as the background of a div enclosing the video but none worked, in all probability, the issue is with the image or the image-path. In short, the image was not found. Ensure that the image path is correct in relative terms and that the image is present at that path.