CODEWITHSUNDEEP
htmlcsshtml5-video
Samuel
Samuel

Reputation: 6136

HTML section background video

I'm attempting to implement a background video simiilar to this. Stretching the full screen but maintain a height of 400px. How may I achieve this without JavaScript? Heres the HTML I have so far 

    <div class="project__three">
        <div class="grid">
                <video src="./videos/test.mp4" id="bg-video" muted autoplay loop ></video>
        </div>
    </div>

Upvotes: 0

Views: 916

Answers (2)

ben.kaminski
ben.kaminski

Reputation: 976

I wrote a blog post about this a while back. I don't think you're using the video tag correctly. I think it should look more like this:

<video muted autoplay loop>
   <source src="http://yourwebsite.com/your-video-file.mp4" type="video/mp4"/>
   <source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
   <source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/>
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

I'm pretty sure you have to include the "ogg" and "webm" extensions for HTML5 video to fully work.

Here is a link to my post where go into full detail.

Upvotes: 2

Billy
Billy

Reputation: 2448

This works with the above, doesn't look great though.Put it in your css

   video{
         webkit - transform:scaleX(2);
        moz - transform:scaleX(2);
         transform:scaleX(2);
  }

Upvotes: 0

Related Questions