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…
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.
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.
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.
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.
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!!!
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
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…
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?
