HTML5 video cover background breaks with smoothState.js

Question

I currently am integrating smoothState.js to create seamless page transitions, however it completely breaks the cover video background automatic scaling.

Can someone help me find where the two are clashing?

I am using this HTML5 video background method.

HTML:

<body id="main" class="m-scene">
<div class="scene_element scene_element--fadeinright">
    <video autoplay poster="video.jpg" id="bgvid" loop >
        <source src="img/video.webm" type="video/webm">
        <source src="img/video.mp4" type="video/mp4">
    </video>
    <div id="content">
        <h1>Title</h1>
    </div>
</div>

CSS:

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('/img/video.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
.m-scene .scene_element {
  animation-duration: .25s;
  transition-timing-function: ease-in;
  animation-fill-mode: both;
}
.m-scene .scene_element--fadeinright {
  animation-name: fadeInRight;
}
@keyframes fadeInRight {
   0% {
     opacity: 0;
     transform: translate3d(100%, 0, 0);
   }
   100% {
     opacity: 1;
     transform: none;
   }
}

JS:

    (function($) {
      'use strict';
      var $body = $('html, body'),
          content = $('#main').smoothState({
            // Runs when a link has been activated
            onStart: {
              duration: 250, // Duration of our animation
              render: function (url, $container) {
                // toggleAnimationClass() is a public method
                // for restarting css animations with a class
                content.toggleAnimationClass('is-exiting');
                // Scroll user to the top
                $body.animate({
                  scrollTop: 0
                });
              }
            }
          }).data('smoothState');
          //.data('smoothState') makes public methods available
    })(jQuery);

Answer 1

I used that exact same css and it didn't work for me, either. I decided to go the 'absolute' css positioning route, and it works fine for me now.

video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    background: url(../img/static_picture_background.jpg) no-repeat;
    background-size: cover;
}

Hope that helps! (not tested in IE, yet)

HTML5 video cover background breaks with smoothState.js

Question

1 answers

solution1
0 2015-08-23 17:52:13

HTML5 video cover background breaks with smoothState.js

Question

1 answers

solution1 0 2015-08-23 17:52:13

solution1
0 2015-08-23 17:52:13