Full Page Cover Video Isn't Sized Properly On Page Load

[matt@hw]

Hi,
We’ve built the home page from Home Eight: Naked with a full cover video at www2.hirewheel.com. When the page first loads, the video fills up the full width and height of the page. However, the video is “cropped” out. After resizing the browser just a bit, the video snaps to the correct proportions. Screenshots attached of before and after.

We’re running the latest version, 2.1 but also noticed the behavior in 2.0.

Here is the shortcode from the page:

[spb_parallax parallax_type="video" bg_image="12339" bg_type="cover" bg_video_mp4="http://www2.hirewheel.com/wp-content/uploads/2013/10/TL-Manhattan-midtown-from-queens.mp4" bg_video_webm="http://www2.hirewheel.com/wp-content/uploads/2013/10/TL-Manhattan-midtown-from-queens.webm" bg_video_ogg="http://www2.hirewheel.com/wp-content/uploads/2013/10/TL-Manhattan-midtown-from-queens.theora.ogv" parallax_video_height="video-height" parallax_video_overlay="none" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="0.5" alt_background="none" el_class="mt0 bt0 mb0 bb0" width="1/1" el_position="first last"]
<div style="width: 100%; height: 80px;"></div>
<p class="impact-text-large" style="text-align: center;"><span style="color: #ffffff;">HireWheel</span></p>
[hr]
&nbsp;
<p style="text-align: center;">[supersearch width="1/1" el_position="first last"]</p>
&nbsp;
[/spb_parallax]

Thank you.

[Tahir – SUPPORT]

Have assigned this to Ed,

Best,
Tahir

[matt@hw]

Great. Thank you.

Just a note, but I was thinking it has to do with the css change in “overflow”. When you resize the window, the value for overflow changes for a couple of inline css classes.

I added this line and it seems to do the trick, but I am by no means a CSS expert: style="top: -270px;overflow: inherit;"

<video class="parallax-video" poster="http://www2.hirewheel.com/wp-content/uploads/2013/10/Screen-Shot-2014-01-13-at-2.20.56-PM.png" preload="auto" autoplay="" loop="loop" muted="muted" data-top-default="270" style="top: -270px;overflow: inherit;"><source src="http://www2.hirewheel.com/wp-content/uploads/2013/10/TL-Manhattan-midtown-from-queens.mp4" type="video/mp4"><source src="http://www2.hirewheel.com/wp-content/uploads/2013/10/TL-Manhattan-midtown-from-queens.webm" type="video/webm"><source src="http://www2.hirewheel.com/wp-content/uploads/2013/10/TL-Manhattan-midtown-from-queens.theora.ogv" type="video/ogg"></video>

[Swift Ideas – Ed]

Hi Matt,

Try editing /js/functions.js, and adding this to line 2384:

parallaxVideo.css('top', - parallaxVideo.height() / 4);

So the var parallax code set should be:

var parallax = {
		init: function() {
			
			jQuery('.spb_parallax_asset').each(function() {
				
				var parallaxAsset = jQuery(this);
				
				if (parallaxAsset.hasClass('sf-parallax-video')) {
				
					if (!isMobileAlt) {
														
							var parallaxVideo = parallaxAsset.find('video'),
								parallaxContent = parallaxAsset.find('.spb_content_wrapper'),
								parallaxVideoTop = 0,
								parallaxAssetHeight = 0;
							
							parallaxVideo.css('top', - parallaxVideoTop);
							parallaxVideo.attr('data-top-default', parallaxVideoTop); 
							
							if (parallaxAsset.hasClass('parallax-video-height')) {
								
								if (parallaxContent.height() > parallaxVideo.height() / 2) {
									parallaxAssetHeight = parallaxContent.height();
								} else {
									parallaxAssetHeight = parallaxVideo.height() / 2;
								}
								
								parallaxAsset.animate({
									'height': parallaxAssetHeight
								}, 400);
								
								parallaxVideo.css('top', - parallaxVideo.height() / 4);
								
								setTimeout(function(){
									parallaxAsset.find('.video-overlay').animate({
										'opacity': 0.8
									}, 200);
								}, 100);
								parallaxContent.vCenterTop();
								setTimeout(function() {
									parallaxContent.animate({
										'opacity': 1,
										'top': '50%'
									}, 600, 'easeOutExpo');
								}, 600);
								parallaxAsset.attr('data-height-default', parallaxVideo.height() / 2); 
								$window.smartresize( function() {
									if (parallaxContent.height() > parallaxVideo.height() / 2) {
										parallaxAssetHeight = parallaxContent.height();
									} else {
										parallaxAssetHeight = parallaxVideo.height() / 2;
										}
									
									parallaxAsset.animate({
										'height': parallaxAssetHeight
									}, 400);
									
									parallaxContent.vCenterTop();
									parallaxVideo.css('top', - parallaxVideo.height() / 4);
									parallaxVideo.attr('data-top-default', parallaxVideo.height() / 4); 
									parallaxAsset.attr('data-height-default', parallaxAssetHeight); 
								});
							}
						
							$window.scroll(function() {
								if ($window.width() > 1024) {
									parallax.videoScroll(parallaxAsset);
								}
							});
					} else {
						parallaxAsset.find('video').remove();
					}
					
				} else if (parallaxAsset.hasClass('parallax-window-height')) {
					jQuery(this).height($window.height() - (parseInt(jQuery(this).css('padding-top'), 10) * 2));
					jQuery(this).find('.spb_content_wrapper').vCenterTop();
					$window.scroll(function() {
						if ($window.width() > 1024) {
							parallax.windowImageScroll(parallaxAsset);
						}
					});
				}
				
				if (parallaxAsset.hasClass('parallax-stellar')) {
					var parallaxSpeed = parallaxAsset.data('parallax-speed');
					parallaxAsset.parallax("50%", parallaxSpeed);
				}
			});
		},
		videoScroll: function(asset) {
			
			var offsetTop = asset.offset().top,
				windowTop = $window.scrollTop(),
				defaultHeight = parseInt(asset.data('height-default'), 10),
				diff = windowTop - offsetTop,
				currentTop = asset.find('.spb_content_wrapper').css('top'),
				heightDifference = defaultHeight - diff * 1.5;
				
			if (windowTop > offsetTop) {	
				asset.css('height', heightDifference); 
				asset.find('.spb_content_wrapper').css('opacity', 1 - (diff / 300));
				if (asset.hasClass('parallax-video-height')) {
				asset.find('.spb_content_wrapper').css('top', currentTop + (diff / 4));
				} else {
				asset.find('.spb_content_wrapper').css('top', (diff / 3));
				}
			} else {	
				asset.css('height', defaultHeight);
				asset.find('.spb_content_wrapper').css('opacity', 1);
				if (asset.hasClass('parallax-video-height')) {
				asset.find('.spb_content_wrapper').css('top', '50%');
				} else {
				asset.find('.spb_content_wrapper').css('top', 0);				
				}
			}
				
		},
		windowImageScroll: function(asset) {
			asset.height($window.height() - jQuery(this).css('padding-top') / 2);
			asset.find('.spb_content_wrapper').vCenterTop();
		}
	};

Hope that helps – that should sort it. Let me know.

– Ed

[matt@hw]

Hi Ed,
That mostly does it. However, there is still a significant portion of the page that isn’t rendering 100% of the window height. See attached screenshot for the large gray area in the footer area.

I tried adding 100% html height and 100% body min-height, but I believe the problem is actually with the computed properties of .spb_parallax_asset.

Can you take a look?

FYI – I followed the example for the naked header in a child theme’s style.css.

And have added this custom css to the child css as well:

#header-section {
	display:none;
}
.page-id-11862 #footer-wrap{
display:none;
}
a.anchor{
	display: block; position: relative; top: -250px; visibility: hidden;
}
.sf-super-search, .spb_supersearch_widget.alt-bg {
opacity: .9;
}
.product-footer {
	padding-top:0px;
}

[Swift Ideas – Ed]

Hi Matt,

Can you drop me a login in a private reply? Think this will need some custom jQuery.

– Ed

[matt@hw]

This reply has been marked as private.

[Swift Ideas – Ed]

Managed to sort it with some custom css 🙂

Hope that helps.

– Ed

[matt@hw]

Looks great, Ed!

[Swift Ideas – Ed]

Great news 🙂

If anyone else is interested, the code used was:

.home #container {
position: static;
}
.home .spb_parallax_asset {
position: fixed;
height: 100%!important;
top: 0;
left: 0;
z-index: 2;
padding-top: 0;
background: none;
}
.home .sf-parallax-video video {
top: 0!important;
}

– Ed