CODEWITHSUNDEEP
htmlcssgoogle-chromeadobe-brackets
user3381665
user3381665

Reputation: 1141

Website working in brackets but html file rendering black screen in firefox and chrome

I have an HTML file that contains a video for the background and a small picture of in arrow. it refrences some CSS files and for the most part its pretty standard. I wrote the code in a program called Brackets. Brakets has a feature that runs the site for you in a browser while you code so you can see changes in real time and the page looks perfect there but when I open the HTML file manually with a browser all i get is a black screen.

 <!DOCTYPE html>

<html>
    <head>

<link rel="stylesheet" href="/CSS/main.css">

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>LA Apparel</title>
  <style>
  #video-bg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
  }
  #video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg > video {
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
  }
  </style>


</head>
<body>
<div id="video-bg">
  <video autoplay="autoplay" loop="true">
    <source type="video/mp4" src="/dasvi.mp4">
    <source type="video/webm" src="/dasvi.webm">
  </video>
</div>

        <img class="arr" src="/images/prenup/arrow.png">



</body>
</html>

My question is: is there a problem with my code or the way I have organized/refrenced files or is it regular for browser to not render locally based video files, and will work when i put it on a server? Thanks.

image for refrence left is file running in brackets right is manually in chrome

Upvotes: 0

Views: 745

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Your URLs are relative to the document root. Internally this works because you're working on 127.0.0.1:33567, but when viewing in your browser it's starting to look for file:///dasvi.mp4, which I'm fairly sure doesn't exist ;)

When testing locally, you should run things on a server, just like Brackets is doing, otherwise you'll get problems like this.

Upvotes: 5

Related Questions