[Tutorial] How to add a Custom HTML5 Background Video

Hi Guys, enyone familiar with this code with a youtube movie?
Somehowe it does now go widescreen, what can i do?

<iframe style="display: block; margin-left: auto; margin-right: auto;" src="//www.youtube.com/embed/k-yMNuG08Mo?autoplay=1&controls=0&showinfo=0&rel=0&loop=1&playlist=svCY_iCQfO8" height="Auto" frameborder="0" allowfullscreen="allowfullscreen" volume="0"></iframe>

Here is my page:
https://preview.webflow.com/preview/mini-slider?preview=9784aae99e33ef1bdd6f7844c42a6405

Hey guys,

First of all thanks for this thread! really helpful!
I got my background video working but I just can’t get the picture to appear if none of the video format are readable… I just have a blue background and nothing else…

Here the code I have:

Every file (video format and the jpg) open nicely in my browser so the problem is not with those files nor the hosting…

Also I cant get any video to work on tablet ( android and Ipad) is there another format I should add or is the videobackground working only with computers?

I guess it must be an error in the code or something but it has been driving me crazy for the a few hours so I ve decided to ask for your help…

Video is all the way down on this page: http://newtrideo.webflow.com/soporte

Any ideas?

Can u show that step by step?, because i have that problem too…

@John_Swanson

I use a totally different, much smaller script then what is used here. So can give you a play by play for mine but not that one.
For me:
I basically put this in the “before end of body” add code section in your website settings page:

    <script>
$(function () {
  
  var outerDiv = $('.videocontainer');
  var videoTag = outerDiv.find('video');
  
  $(window).resize(resize);
  resize();
  
  function resize() {
    var width = outerDiv.width();
    var height = outerDiv.height();
    var aspectW = 16;
    var aspectH = 9;
    var scaleX = width / aspectW;
    var scaleY = height / aspectH;
    var scale = Math.max(scaleX, scaleY);
    var w = Math.ceil(aspectW * scale);
    var h = Math.ceil(aspectH * scale);
    var x = 0;
    var y = 0;
    if (w > width) x = -(w - width) * 0.5;
    if (h > height) y = -(h - height) * 0.5;
     
    videoTag.css({
      width: w,
      height: h,
      top: y,
      left: x
    });
  }
  
});
</script>

Then I open the designer, drag in an embed and paste this:

    <!-- Begin Video Embed -->
<video autoplay style="width:100%; height:100%; position:absolute; margin:auto; z-index: 0; top: 0;">  
  <source src="http://yourvideolink.com/video.mp4" type="video/mp4">

  <source src="http://yourvideolink.com/video.webm" type="video/webm">
 
</video>
<!-- End Video Embed -->

Replace the “http://yourvideolink.com/video” links with your content.
Remember to set the class on the video embed element in the designer as “videocontainer”. If you want it to fill the page height, set it’s (the video embed) height to 100%, position relative or absolute - and also set the body position to relative.

PS: Video will not work on tablets or phones.

1 Like

Yes, now all work, thnx.
Earlier I tried to put video from a dropboks (and http and https), but worked nothing because it wants straight line link that on the end have mp4( or other format).
Sorry for my English.

1 Like

Also how can i make a video only play when i use slider.

Hi, use your solution and video doesnt goes full screen with 100% height, how to set body to relative postition in webflow, that function not active

I cant get this to fill the screen 100% height. How to do that?

If you have the positioning set to relative and overflow hidden, you should be able to set your height by typing in 100% within the position panel. This will work on your desktop views and designing depending other views also.

Tip very good. It worked fine on my site. Thank you.

I’m still having trouble with my fixed navigation displaying after implementing my background video. I have a section with class “Navigation” that has absolute positioning at the bottom of my hero section, and a navbar that appears when “Navigation” scrolls out of view, with class “Fixed Navigation.” However, after implementing the background video, “Fixed Navigation” no longer appears when scrolling, but seems to disappear behind the second section (“About Us”) as if the z-index is lower than everything else. I have raised the z-index on “Fixed Navigation” to be higher than everything on the page, but am still having the same issue.

The preview link is here:
https://preview.webflow.com/preview/newanglecreative-test?preview=d14ffda93b1859b14ff7f93096c2129b

Hello, do you know if there is a way to autoplay the video, but just after all assets load’??

Thanks!

HI, I’ve followed the tutorial on adding background video and its working fine on laptop, but I am just not getting the still image to appear on mobile. Nothing but a white screen appears in the section. I’m still relatively new at this… Can anyone help?
Thanks!!!

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

Videos of any height will be tailored to the size of the block . Now the image is displayed on iOS devices:

 <video autoplay loop style="min-width:100%;min-height:100%;width:auto;height:auto;margin-left:0;margin-top:0; position:absolute; z-index: -1;" poster="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">
<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4" type="video/mp4" />
 <source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type="application/ogg" />
</video>
1 Like

I’ve managed to add a video background using this example. However I am trying to add a slider for text to center on the top in the center of the video and cannot figure this out. Always seems to be at the top above the actual video and if I try to move it simply slides the video lower. Any suggestions? Here is share link: https://preview.webflow.com/preview/red-hot-rc?preview=81dd43fb1e8df304925043128f183a8a

No answer on how to overlay content over the top of the video background and position it so it centers?

Hi Dan,
I am new here…
I did exactly what you said and replace url of my video to youtube url but no video shown :frowning:
Thanks in advance,
Chris

Sorry for the total noob question but other than dropbox, what alternatives are there for video hosting? I am assuming that Vimeo and YouTube links wont work…

Is there a possibility to show an image on phones and iOS, or tablets ?

Help! Hello, I am trying to figure out how to set a video loop as a section background with text on top of this? Can anybody tell me how to go about this?

looking from something similar to this : https://www.bizzabo.com/