Video background not working on safari

Design help General
1

Iv embedded short background videos on my slider. It seems to be working on chrome but not on safari (ipads or iphons also) at all.
the embed code iv used is -

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;">
  <source src="http://www.dailymotion.com/video/x2hl0xd_fashion22_creation" type="video/mov" />
  <source src="http://webmup.com/K0a1I/vid.webm" type="application/ogg" />
</video>

Iv seen another thread here of someone that had another problem @jcoger and got help from @thesergie.
The code used by @jcoger was -

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;">  
  <source src="http://glamsoul.net/vids/glamsoul-bg.mp4" type="video/mp4" />
  <source src="http://glamsoul.net/vids/glamsoul-bg.ogv" type="application/ogg" />
  <img src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">
</video>

but i cant figure our where the videos are hosted?
I use a site (http://webmup.com/) to upload the webm file and another site to upload the MOV format.

The website link is (alexanderpr.webflow.com)

Please help.
Nir

2

If you want to manually embed videos on websites (versus relying on Youtube or vimeo), you need 3 formats for each videos, to adress all platforms and all browsers (MP4, OGG, Webm) And you need to host your videos on a server or a cloud like dropbox, get the direct link to them and embed them in the site via custom code.

1 Like
3

Hi @vincent thank you for the answer!

what do you mean embedding them via custom code? So iv created 3 versions of the video in the different formats, uploaded them to drop-box, and created a link of those videos from drop-box.
I used the links but its not working at all now.

so the code is this now -

    <video id="video_background" autoplay="true" loop="loop" muted="muted" volume="0" style="z-index: -1;"> 
  <source src="https://www.dropbox.com/s/2n96j6w8g6u314j/APR_EVENTS.mp4" type="video/mp4" />
  <source src="https://www.dropbox.com/s/kuk2uu5t7eau1hj/APR_EVENTS.webm" type="video/webm" />
  <source src="https://www.dropbox.com/s/wg6wdusty20l9y4/ARP_EVENTS.ogv" type="application/ogg" />
</video>

So the links here are directly from dropbox, and im guessing thats not right.
What am i doing wrong?

4

Adding a HTML code widget and pasting the code in.

You’re right, it’s going to work when the links work. Dropbox has a domain for direct links. Replace www.dropbox.com by dl.dropboxusercontent.com.

5

Hi @vincent

It all works on chrome, but still not on safari.
The links of the .webm and .ogv work but .mp4 for some reason doesn’t.

link to the mp4 video

the video is on on slide 2 works good, but no mp4 format.
http://alexanderpr.webflow.com/

6

The videos you link in the post are all black for me. I see the vid online in chrome thought.

Are your video encoded well? What do you use to compress them in every format?