CODEWITHSUNDEEP
htmlvideobackgroundsafari
Niko
Niko

Reputation: 51

Video background HTML5 in Safari

I'm helping out with a website, we want to have a video background when you land on the site.

It works just fine on Google Chrome but it does not work as expected on Safari.

Here is the website (please compare it with chrome and safari): http://tinyurl.com/nbe8rzy

HTML For video:

<video autoplay loop poster="polina.jpg" id="bgvid">
    <source src="<?php bloginfo('template_url'); ?>/assets/img/video1.mp4" type="video/mp4">
</video>

CSS for video:

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
background-size: cover;
z-index: 1; }

I'm using fixed position with z-index 1 on video, and relative positioning with higher z-index then 1 on rest of the divs (so the video stay in the background).

Problems on safari:

  1. Video streching is delayed
  2. The other divs does not show

Questions:

  1. How can I fix this? (Code/link/help is very much appreciated!)
  2. Is it possible to use video background for mobile/ipad? or should it fallback to a image?

Upvotes: 2

Views: 11593

Answers (1)

Jason
Jason

Reputation: 99

Update your video background div to 

#yourvideobackground { 
     position: absolute;
     top: 0px;
     left: 0px;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1000;
     overflow: hidden;
}

To work around and have the video work on most browsers including Safari, you're going to have to give it an absolute position, and set its z-index below all other elements above it.

You can't use the background-size attribute either, not for a video.

If you want that inside of another div, make sure that the parent div has an a relative position set.

If you don't want to go that route, you can use a nifty plugin that I've had success with.

https://github.com/Victa/HTML5-Background-Video

Good luck!

Upvotes: 8

Related Questions