CODEWITHSUNDEEP
htmlhtml5-videobrowser-cachereload
ISAAC FINKELSTEIN
ISAAC FINKELSTEIN

Reputation: 39

Cached video doesn't load on site

enter code hereHi I have a web page with an html5 video, when I reload the page the video doesn't load, in the network tab it says status code 304, but the video doesn't load I even tried to hard reload or disable cache which didn't work, what's weird is that when it reloads automatically using vscode live server, it does load the video just fine here is my code

<section class="hero">
    
  <div class="video-wrapper">
    <div class="video">
      <video autoplay mute loop
        alt="not supported by browser">
       <source src="sources/videos/hero%20background%20video%20small.mp4"
        type="video/mp4">
      </video>
    </div>
  </div>
    <div class="hero-desc-wrapper">
      <div class="hero-desc">
        <h1>lorem ipsum</h1>
        <p>lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  
  </section>

.hero{
  position: relative;
  height: 90vh;
  overflow: hidden;
}
.video-wrapper{
  position: absolute;
  top: 0;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}
video{
  max-width: 100vw;
  margin-top: -28px;

}
.hero-desc-wrapper{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(69, 128, 182, 0.75);
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-desc{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color:  var(--primary-color-light);
}
.hero-desc h1{
  margin: 20px;
  font-size: 1.6rem;
}

it doesn't look like it has anything to do with proper syntax, since it works when refreshed by vscode live server

Any help would be greatly appreciated thanks

Upvotes: 0

Views: 103

Answers (1)

Proxy
Proxy

Reputation: 81

Your video path doesn't look correct. Space characters are not allowed in URLs, you have to encode them. Also the video element doesn't look right. Here is an example for the right use.

Here is an URL Encoder.

Reference to another question.

Upvotes: 1

Related Questions