[Tutorial] How to add a Custom HTML5 Background Video

Community resources Webflow Tips
103

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

104

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: Soporte Tecnico Trideo

Any ideas?

105

Can u show that step by step?, because i have that problem tooā€¦

106

@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
107

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
109

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

112

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

113

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

114

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.

115

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

116

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

117

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

Thanks!

118

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

119

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
121

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

122

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

123

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

124

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ā€¦

125

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

126

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/