waigyuk Posted June 25, 2023 Share Posted June 25, 2023 (edited) I've tried to add a video background to a webpage using the following code. It works offline but the video doesn't show at all on brave, firefox and edge browsers. I'm just checking if this is disabled in free hosting before I check for changes needed to the code. I have this in the <head> section : <style> #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; opacity: 0.1; right: 0; bottom: 0; z-index: -1; } </style> And this in the <body> section : <video autoplay muted loop id="myVideo"> <source src="untitled.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> Edited June 25, 2023 by waigyuk Quote Link to comment Share on other sites More sharing options...
SpookyKipper Posted June 25, 2023 Share Posted June 25, 2023 free hosting has a file size limit of 10MB, so make sure you video is less than 10MB, you can also use an external video host such as Google Drive Quote Link to comment Share on other sites More sharing options...
waigyuk Posted June 25, 2023 Author Share Posted June 25, 2023 Ok thanks. I just tried using a 5mb video file and it is still not working online so it must be a code thing. Quote Link to comment Share on other sites More sharing options...
PlanetCloud Posted June 25, 2023 Share Posted June 25, 2023 23 minutes ago, waigyuk said: Ok thanks. I just tried using a 5mb video file and it is still not working online so it must be a code thing. Open up Dev Tools and see if the requests fail or something. There should be an error message. Most likely wrong path. Quote Link to comment Share on other sites More sharing options...
waigyuk Posted June 25, 2023 Author Share Posted June 25, 2023 In dev tools it gets this error Failed to load resource: the server responded with a status of 404 () untitled.mp4:1 Quote Link to comment Share on other sites More sharing options...
waigyuk Posted June 25, 2023 Author Share Posted June 25, 2023 Ok, it's working. Of course it had to be the simplest error. My uploaded file was called Untitled.mp4 instead of untitled.mp4. It's working in edge and firefox though both seemed to take almost 1 minute to load the background video even though it's only 5mb. Brave isn't working so far, but I recently read a post about chrome disabling autoplay and a way around it. Will look for that now. Quote Link to comment Share on other sites More sharing options...
PlanetCloud Posted June 27, 2023 Share Posted June 27, 2023 On 6/25/2023 at 7:10 PM, waigyuk said: In dev tools it gets this error Failed to load resource: the server responded with a status of 404 () untitled.mp4:1 404 error means the path/filename specified is the problem. If you can verify it had been successfully uploaded. On 6/25/2023 at 7:23 PM, waigyuk said: Ok, it's working. Of course it had to be the simplest error. My uploaded file was called Untitled.mp4 instead of untitled.mp4. It's working in edge and firefox though both seemed to take almost 1 minute to load the background video even though it's only 5mb. Brave isn't working so far, but I recently read a post about chrome disabling autoplay and a way around it. Will look for that now. Chrome and Brave disabled autoplay if there are no user interactions, however, I'm sure it could still be enabled in some way. The slow loading speed, it's the downside of free hosting. I recommend you upload the video to YouTube and embed it from there instead. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.