So, you need to produce your own video for this to work. This video should be at least 720P resolution and shouldn’t exceed 30 seconds in length as we’re going to just loop the video for the effect. When planning on adding a video to your website as a background you must first have a video. Visit their website here.īeing that I got ahead of myself a little bit there, let’s get back on track. Which I haven’t even got to yet, but I suggest taking a second right now to download this. This software allows you to convert your video files to the filetypes needed to execute the video on your website. I found this awesome little piece of open source goodness called “Miro Video Converter”. I wasn’t sure where to start when it came to HTML5 video tags, so I want to share with you the entire process of taking a video from your computer and making it a useful website div element.
#CSS BACKGROUND RESPONSIVE RESIZE HOW TO#
I am going to cover more than just how to apply some code to your page in this tutorial.
So, with some HTML5 and CSS3 trickery… I was able to accomplish this without having to use JavaScript at all! I mean, isn’t that the point of HTML5? Did I mention that the page was responsive (Bootstrap) and the video needed to scale to width without destroying the aspect ratio, oh and that the containing div has a FIXED HEIGHT!!! Yeah, fun stuff considering I had never attempted this before. I needed a HTML5 video background to appear inside a: Either way I want to get this out there ASAP. Ugh! So this took me the better part of a day, on a holiday weekend when I shouldn’t be working.
0 kommentar(er)
