Responsive video banner on Safari has huge gaps top and bottom

Hi all,

I’m trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.

Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens. http://noisilyfestival.com/video-test.html

I’ve set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.

Can’t figure out for the life of me what’s going on here! I’ve set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!

Pat

I don’t have Safari to test with so can’t see what’s wrong, but my initial thoughts. Try setting height:auto for the video. And one thing bugging me is the <style> tags being in the body. That should be in the head section to be valid.

Thanks for your reply! Sure I realise that about the style tags, it’s just taken out of a stylesheet from a full wordpress site with a lot more content on it. I’ve just taken out the relevant elements to see if this bug still prevailed and it does :smile:

Height auto doesn’t work, tried that. Fixing a height sorts it out but then it’s not responsive width wise! It’s seems like such a simple thing that should just behave as it does in every other browser…hmmm.

It plays for me using Chrome, but not Firefox.

Which version of Safari are you using?

Hi,

I can see the problem in Safari which strangely goes away if you toggle the width on and off in the developer tools so there is obviously some rendering quirk going on there.

I tested using the old fashioned intrinsic method and that seems to fix the issue.

e.g.

html,body{margin:0;padding:0}
#homepage-video{
	width:100%;
	height:100%;
	background:red;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}

.video-wrapper{
	position:relative;
	padding:56.25% 0 0;
}

and.

<div class="video-wrapper">
  <video controls autoplay loop id="homepage-video" poster="http://noisilyfestival.com/images/green-globe.png">
    <source src="http://www.noisilyfestival.com/video/noisily-vid-trimmed.mp4" type="video/mp4">
    Your browser does not support the video tag. </video>
</div>

The padding-bottom changes the ratio but the above seems to match what you had.

Thanks sooooooo much, works a treat :slight_smile:

Only thing is autoplay doesn’t appear to be working. I’m using autoplay=“autoplay” on the video tag. Is there any reason this may have stopped working, is it a Safari bug?

The local demo I made yesterday with your code is auto playing for me in Safari ok.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.