Need help with background video code

Design help General
1

I’ve followed the “method #2” tutorial for adding background video. The video is playing fine for me on laptop, but instead of the desired still image on mobile, all I’m getting is a blank white section. I’ve tried to replicate the embed code in the tutorial, but obviously doing something wrong. Can anyone help? Thanks!!!

https://preview.webflow.com/preview/boomerangjet?preview=abee6d05a249378e0204b3d6e0f2783b

2

Ok so several issues with your code, but none that we can’t correct ツ

  1. there are closing characters missing
  2. there are formats missing (you only have an MP4 video linked twice, you also need, OGG and Webm formats)
  3. there is no poster image declared
  4. the image you declare doesn’t work (the link doesn’t work)

Here is a working code (I use a placeholder image for example)

<video width="640" height="360" preload="none" controls poster="https://placehold.it/350x150">
<source src="http://dl.dropbox.com/s/mecvq6tcuv0umju/3DCam compressed.mp4?dl=0" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

Note how the poster image is declared.

So you’ll need as much <source> line as you have video formats. Usually for html5 video we put mp4, Webm and Ogg formats, plus a poster in jpg.

The links you put in your code must work when you type them individually in a browser. For instance, this one: http://syddev.com/jquery.videoBG/assets/Boomerang image web optimized.jpg does not.

I wrote a post about html5 videos recently, here is the link. Can you try all this and come back to tell me if you got it to work?

3

PS when can I fly in one o those things!? They are magnificient (:

1 Like
4

I second that @vincent when can we fly in one of those things? :smiley: BTW the HTML5 Video generator is the best app, it works so smoothly and is really fast. :slight_smile:

5

Yeah, super duper purchase :slight_smile: I used it 20 times already I think (:

1 Like
6

Thank you so much!!! Its very close! Video is working well on laptop, still image looks good on ipad, but on iphone I’m seeing a “play” button? Any suggestion how to get rid of this? :slight_smile:

7

Ah, ok

Videos on mobile = trouble. Personally, I make the video element hidden for mobile and craft a specially tailored element for devices. Usually, I make a animated gif with a few frames of the video and use it for mobile.

Check what I did for http://www.1001pneus.com/

It works well but there is a known bug: if you add the site to an iphone homescreen with Safari, when you launch it from the cion, everything goes ok, but the video, even if I told webflow not for mobile and even if it works when browsed normally by launching chrome and safari, when fully loaded, starts playing fullscreen…

1 Like
8

Awesome!! Thanks again for your help!!!

9

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