How do i get my video.mp4 to display on website?

226 Views Asked by At

I have trouble displaying a video on my website. It's working when I try it with vs code live server but not when uploaded... The video is supposed to start when you arrive on page and loop. There is also text displaying in front of video.

Html:

 <div class="container">
      <video autoplay loop muted>
        <source
          src="/Steak - 16395.mp4"
          type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
        />
      </video>

      <div class="text-box">
        <h1>LINNÈA</h1>
      </div>
    </div>

Css

.container {
width: 100%;
height: 100vh;
position: relative;
pointer-events: none;
}

.container video{
  width: 100%;
  height: 100%;
}

.text-box {
  position: absolute;
  top: 0;
  left:0;
  background: #111;
  height: 100%;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  font-weight: 900;
  mix-blend-mode:color-dodge ;
}

Website is uploaded with filezilla on https://www.infinityfree.net/. Everything seems fine except the video.... Any clues?

I tried changing video format to see if that was the problem, but nothing happened.

Seperated html code from index and ran with styling in new vs code project to see if other html or styling was interfering with the video.

Tried changing browsers. (website works best with crome or edge)

0

There are 0 best solutions below