Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 7, 2016 at 6:58 am #594087
    RyanSarver

    We are using a video as the background in the color section on our home page. However, when the page initially loads there is a significant black space on the bottom of the video. If the window is resized the video becomes responsive and fills in the black space and looks how we intended the section to look. This is visible across multiple browsers when the page first loads.

    I should also note it seems to be appearing when the image window is taller than wider. If the window is more landscape than portrait the page seems to load properly.

    • This topic was modified 8 years, 8 months ago by RyanSarver.
    March 8, 2016 at 5:37 am #594791
    Rikard

    Hi RyanSarver,

    It looked fine on my end using a 15″ MacBook and Chrome, in what browser and screen size are you seeing that?

    Best regards,
    Rikard

    March 8, 2016 at 7:05 am #594826
    RyanSarver

    So we are seeing this on several computer monitors and browsers. We
    witness this on chrome and safari on a 34in ultra wide display connected to
    MacPro, a 15 in Macbook pro (pre Retina), and a 11in Macbook Air. Again, once I grab a corner of
    the window and resize, the problem goes away immediately.

    I have attached a link of what we see.

    Also, I have tried photos and there isn’t a problem. This seems to be a video problem

    • This reply was modified 8 years, 8 months ago by RyanSarver.
    March 8, 2016 at 7:12 am #594835
    Basilis

    Hi!

    Do you have any type of caching activated to your web site?
    That issue can happen with videos, based on the cache and as you are on WPEngine I can assume that there is also server cache.

    Best regards,
    Basilis

    March 8, 2016 at 7:48 am #594846
    RyanSarver

    No special cache activated. Clicked purge on wpengine backend. I swapped out the video with another self hosted video and experienced the same issue. I also inserted a vimeo video and the same problem occured – screen shots attached. Whenever ever the browser window is taller than it is wide the problem presents itself. Depending on the proportions of the screen sometimes the black is alot and sometimes is is just a little.

    March 10, 2016 at 8:26 am #596137
    Ismael

    Hey!

    I checked the site on Chrome and Firefox, Windows 7 but I can’t reproduce the issue. Anyway, please try this in the functions.php file:

    add_action('wp_footer', 'ava_auto_resize');
function ava_auto_resize(){
?>
<script>
(function($){	
	var int = window.setInterval(function(){
		$(window).trigger('resize');
	}, 2000);
	
	$(window).load(function () {	
		setTimeout(function() {
			clearInterval(int);
		}, 5000);
	});
})(jQuery);
</script>
<?php
}

    Cheers!
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.