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

$(document).ready(function () {
    var video = $('#myVid');
    //before everything get started
    video.on('loadedmetadata');

    $('li, .thumbs').on('click', function () {
        $('.thumbs').bind('click', function() {
        $('#MyT').fadeIn(0);
        $('.slider').fadeIn(0);
        $('.timeBar').fadeOut(0);
        });
        var numb = $(this).index(),
            videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'
            ],
            myVideo = document.getElementById('myVid');
            myVideo.src = videos[numb];
            myVideo.load();
    setTimeout(function(){
        myVideo.play();
    }, 200);
    $('#myVid').bind("playing", function() {
        $('#MyT').fadeOut(1000);
        $('.timeBar').delay(250).fadeIn(0);

    });

    $('#myVid').bind("ended", function () {
        $('.slider').fadeOut(0);
        $('.timeBar').fadeOut(0);

    });

});
});

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