Hello - problems with background video". I have followed your online documentation, but no “Background video” in Properties.Found it in Components, and placed vid inside container sourcing it correctly. Fresh doc. Container width and height set to 100vh and 100vh in special created test movie.css. Fail in preview and online. I have the App Connect Local framework activated. It looks very simple according to your instructions but not for me. Is my video too large? 1.5 mins… I am NOT a coder Thankyou. I am a basic user only, Have checked other posts but not helping…
Welcome to Wappler.
What is the file size of your video? Keep in mind the entire video needs to download before it can be displayed. Try replacing your video with a short video of around 5 to 10 seconds and see if it loads. If it does then your video file size is much too large. If it doesn’t load either then the problem is elsewhere. But the first thing to do is test with a smaller video.
Also it would be helpful if you posted your code here as well.
I use https://handbrake.fr to reduce the video down to a more manageable size. Works well 
Hi I also reduced the vid using Handbrake - to 1290 x 1080px. and reloaded it’s STILL not showing. Is the doc .html file meant to just go in the root folder.? I flushed my cache in Chrome and also used Firefox. Nothing. What’s up? I am using a live “testing server” so you’ll find it at https://testbwd.nz/testvid.html I also reduced it further to 720px - still nothing. Please help if you can. Is something up with my providers - Hostgator?
Thank you for your quick response.
Video is from Envato Elements - made for online stuff. 64.2MB/ 30fps 3840px w x 2160,
I also tried another which didn’/t work, but was longer - 2mins - though only 1920 x 1080, 194mb
CODE in TEST doc is
<!doctype html>
<html>
<head>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>testVid</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/movie.css" />
<script src="dmxAppConnect/dmxBackgroundVideo/dmxBackgroundVideo.js" defer></script>
</head>
<body is="dmx-app" id="untitled">
<div class="container">
<div is="dmx-background-video" id="bgvideo1" src="assets/video/snippets-vid.mp4"></div>
</div>
<script src="bootstrap/4/js/popper.min.js"></script>
<script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>
</html>
I also created a css style sheet which I called movie.css:
Code:
link {
}
.container {
height:100vh;
width: 100vw;
}
Thank you
64mb is a huge video for a page background. It needs to be resized.
Looking at your link this is not the problem, the problem is that the background video component js files are not uploaded to your server:
So make sure to upload the whole dmxAppConnect folder.
It’s throwing up an error on the video.
As Teodor has said make sure the whole folder is uploaded.
As Teodor has said make sure the whole folder is uploaded.
I’ve tried it on a test page and the video works fine, but size is quite big.
https://www.plgsa.com.au/test-video
I did this, and it makes no difference. I think I need to clean the whole project out and start fresh following your advice. Could you please advise whether a video of 1920 x 1080px seems OK to you. 6-8 seconds. Should the parent container be 100vw AND 100vh or just 100vw if I’m wanting responsive… DO appreciate your help…
Your files are now there, but your container has a height of 0px, so you can’t see it.
I thought I had made a style.css with .container set at height 100vh and width at 100vw. Clearly this is not what I’m meant tp be doing. As you say 100% of O = 0. SO where do I put this container size? Sorry. I’m just a basic user - doing my best. It’s a a great product. I really llike it
You’ve styled
.container-fluid {
height:100vh;
width: 100vw;
}
while on the page the class you are using is .container
I think I have sorted this out now, css is now .container but still nothing is showing.
Code:
.container {
height:100vh;
width: 100vw;
}
Does using 100vh etc sort out the 0px problem or not:
Right now I’m shot. I’ll start again in the morning… Thankyou for your help.
You just need to convert your container to a background video:
and not add the background video inside it.
Hi Teodor. Followed your instructions to the letter. It worked ONCE only. Thereafter the container sat on top of the background video obscuring it except at the sides. I finally deleted the project entirely, started a fresh one and have uploaded to the test site. There is nothing in the html file except the container ( and the background movie). I also cleaned out the hostsite completely to avoid any confusion of files. I made a point of re-uploading dmxApp Connect after had created the movie just in case something had changed there. I would be VERY grateful if you could tell me what on earth is going on. Thank you!! Same as last time : https://testbwd.nz/testvideo.html…
Hi Teodor - this is now all sorted out. Turns out that unless there are other elements on the page it doesnt work. I really appreciate the help you gave me. It might be a good idea to update the documentation on background videos. Wappler has moved on …
Your page is an empty page …
Brad - not really. Work in progress. Found backgound vid only worked when I already had other elements else on the page. One html doc with nothing else in it but one container containing background vid led to an empty page, What I can’t work out now is why I have such expanses of white around elements when I upload to the test site/ Margins /padding seem normal. Any ideas. ? Turns out t o have been a problem with chrome. Now sorted.
Sorry. All well! I have been uploading many times trying to sort this out, and the view you’ve posted was obviously done after I fixed the problem with Chrome. The other browsers were handling it fine.
So thank you for Wappler’s super support- (2nd to none in my experience.)!
I am so grateful/ I will be subscribing to the introductory tutorial someone mentioned though I have been all over a lot of the documentation to help myself. (Wondering if it might pay to update the post on background videos? in your documentation.
I will no doubt need to be back for help from time to time. Its been a good experience. Thank you.