Full video background?

donboe · May 14, 2013, 7:39am

Hi Pullo, I can’t get this to work. What I would like is this:

The side start with a Video
The video fades out
A image fades in.
When the image is completely faded in the content fades in

I made two examples. In the first example I’m using your method where the background-image and content are first hidden. After the video is faded out the background image should fade in, and after that one is faded in the content should fade in:


<script type="text/javascript">
	$(document).ready(function(){
		$('#wrapper').hide();
		$('#background-image').hide();
	});
	$(function() {
		var BV = new $.BigVideo({useFlashForFirefox:false});
  		BV.init();
  		BV.show('video/porsche.mp4', {altSource:'video/porsche.ogv'});
  		BV.getPlayer().addEvent("ended", function(){
			$('#wrapper').hide();
    	$("#big-video-vid_html5_api").fadeOut(1400, function() {
				$("#background-image").fadein(1400, function() {
					$('#wrapper').fadeIn(1400);	
				
			});
		});
  });
});

As you can see is the video playing but after it is faded out, neither the background image or wrapper are showing?

In this second example I have the background-image fading in like I want it. But here I used a delayed function:


<script type="text/javascript">
	$(document).ready(function(){
		$('#background-image').hide().delay(18500).fadeIn(1500);
	});
	$(function() {
		var BV = new $.BigVideo({useFlashForFirefox:false});
  		BV.init();
  		BV.show('video/porsche.mp4', {altSource:'video/porsche.ogv'});
  		BV.getPlayer().addEvent("ended", function(){
				$("#big-video-vid_html5_api").fadeOut("slow");
					
  });
});
</script>

At least the image is fading in after the movie is faded out, but I am sure that there must be another more logical way then using the delay function. I hope that you see what I am doing wrong.

James_Hibbard · May 14, 2013, 8:29am

Hi donboe,

Try this:

<!doctype html>
<html lang="en">
  <head>
  <base href="http://diem.sothenwhat.com" />
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
    <link rel="stylesheet" type="text/css" href="css/bigvideo.css" media="screen">
  </head>

  <body>
    <div id="background-image"></div>
    <!-- #wrapper -->
    <div id="wrapper">
      <!-- #header -->
      <div id="header">
        <ul id="menu">
          <li><a href="#" tabindex="1" title="Peter Diem Artwork">Artwork</a></li>
          <li><a href="#" tabindex="2" title="Peter Diem Video">Video</a></li>
          <li><a href="#" tabindex="3" title="Peter Diem Bio">Bio</a></li>
          <li><a href="#" tabindex="4" title="Peter Diem Counterfeit">Counterfeit</a></li>
          <li><a href="#" tabindex="5" title="Peter Diem Gallery">Gallery</a></li>
          <li><a href="#" tabindex="6" title="Peter Diem Contact">Contact</a></li>
        </ul>
      </div><!-- #header -->
    </div><!-- #wrapper -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\\/script>')</script>
    <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
    <script type="text/javascript" src="js/video.js"></script>
    <script type="text/javascript" src="js/bigvideo.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#background-image, #wrapper").hide();
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
        BV.show('video/porsche.mp4', {altSource:'video/porsche.ogv'});
        BV.getPlayer().addEvent("ended", function(){
          console.log("here");
          $("#big-video-wrap").fadeOut(1400, function() {
            $("#background-image").fadeIn(1400, function() {
              $('#wrapper').fadeIn(1400);
            });
          });
        });
      });
    </script>
  </body>
</html>

Any good?

donboe · May 14, 2013, 9:16am

Hi Pullo, It is working now but for some strange reason do I need to set the position of the wrapper div to absolute. If I set it to relative I get a vertical scrollbar. I only cant figure why?

James_Hibbard · May 14, 2013, 9:21am

Good, good

Yeah, I noticed this, too.
AFAIK this is not something influenced by the JavaScript, as showing and hiding elements just sets their display attribute accordingly.
If setting the position to absolute does the trick, I would just go with that

donboe · May 14, 2013, 9:53am

Thank you so much Pullo:tup: I don’t see another option either I have one last question concerning the Javascript though. When the movie is faded out I get a white screen for about a second, is there anything I can do to avoid that? Should I for example set the background-image function before the big-video-wrap function?

James_Hibbard · May 14, 2013, 10:41am

That is being caused by fading the movie out.
Why don’t you just leave the movie where it is and fade the other two elements in on top of it?

Like this:

<!doctype html>
<html lang="en">
  <head>
  <base href="http://diem.sothenwhat.com" />
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
    <link rel="stylesheet" type="text/css" href="css/bigvideo.css" media="screen">
  </head>
  
  <body>
    <div id="background-image"></div>
    <!-- #wrapper -->
    <div id="wrapper">
      <!-- #header -->
      <div id="header">
        <ul id="menu">
          <li><a href="#" tabindex="1" title="Peter Diem Artwork">Artwork</a></li>
          <li><a href="#" tabindex="2" title="Peter Diem Video">Video</a></li>
          <li><a href="#" tabindex="3" title="Peter Diem Bio">Bio</a></li>
          <li><a href="#" tabindex="4" title="Peter Diem Counterfeit">Counterfeit</a></li>
          <li><a href="#" tabindex="5" title="Peter Diem Gallery">Gallery</a></li>
          <li><a href="#" tabindex="6" title="Peter Diem Contact">Contact</a></li>
        </ul>  
      </div><!-- #header -->
    </div><!-- #wrapper -->
      
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\\/script>')</script>
    <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
    <script type="text/javascript" src="js/video.js"></script>
    <script type="text/javascript" src="js/bigvideo.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#background-image, #wrapper").hide();
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
        BV.show('video/porsche.mp4', {altSource:'video/porsche.ogv'});
        BV.getPlayer().addEvent("ended", function(){
          $("#background-image").fadeIn();
          $('#wrapper').fadeIn(1400);
        });
      });
    </script>
  </body>
</html>

donboe · May 14, 2013, 10:59am

That is a good option indeed. Does that mean that I have to set a z-index (lower then the other ones) on the big-video-wrap

James_Hibbard · May 14, 2013, 11:01am

I don’t think so.
As you can see, my demo just pulls in all of your style-sheets and it seems to work ok as it is.

HansieMan · July 30, 2013, 2:48pm

Dear Pullo,
could you please have a look at my script?
Trying to hide a div (boxie) at the beginning of the movie en showing it back after de video has completed.
Can’t get it to work en pulling my hear out for hours now.
thanks in advance!!

<style type="text/css">
#boxie {position: relative;height:300px;width:300px;z-index:10000;border:1px solid red;background-color:#FFFFFF;}
</style>

<div id="boxie"></div>

<script type="text/javascript">
var BV;
$(document).ready(function(){
	// hide #boxie
	$('#boxie').css('display', 'none');

  // initialize BigVideo
  BV = new $.BigVideo();
	BV.init();
	if (Modernizr.touch) {
		BV.show('beeld_circus.png');
	} else {
		BV.show('1778-ani_fr800-1000.mp4',{loop:false});
	}

	// at end of video show #boxie
	BV.getPlayer().addEvent("ended", function(){
		$('#boxie').css('display', 'block');
	})
	
});
</script>

you can see it (not) working here

James_Hibbard · July 31, 2013, 12:21pm

Hi,

Welcome to the forums

In Video.js 4.0, addEvent was replace by on.

Change your JS to this and all will be well:

$('#boxie').css('display', 'none');
					
var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
  BV.show('beeld_circus.png');
} else {
  BV.show('1778-ani_fr800-1000.mp4',{loop:false});
}

BV.getPlayer().on("ended", function(){
  $('#boxie').css('display', 'block');
})

Please also notice that wrapping everything in a $(document).ready() callback is also not necessary.

HTH

HansieMan · July 31, 2013, 12:35pm

Pullo, you just made my day/week/month/year
Many many thanks!!!
Cheerzzzz
Hans

James_Hibbard · July 31, 2013, 12:49pm

No problem.
Happy to help