Add Video To Webpage

Getting video to autoplay across most platforms on most devices can be a bitch. Apple (Safari) and Google (Chrome) are constantly moving the goalposts. This (nor now) works.
Thanks to HTML5 and CSS adding things like video to webpages is pretty painless, just use the < video > video details here < /video > tags and your meant to be good.

The problems kick in when your webpages get to the browser, as they tend to interpret stuff their own way, and in the case of Apple and Google they feel the need to dictate how things are done.

Now, in the case of video, I do get why Chrome and Safari bring their own rules into play; they won't autoplay the video, because they want to hinder those seriously annoying video adverts, plus they want to save the users bandwidth (which they could do if they stopped telling the device to phone home with your data every few seconds!).

But, as with most things, there is a workaround.

The first thing you need to do is stick some css in your style sheet, or between some style tags at the top of your pages content area (the latter is dirty, but works.)

So. stick this there…

What that does is make the video responsive. Why that isn't done by default I don't know. But it isn't, so you need it. That code will make the video 100% the width of the container it's in and full height. If you need to change that, just change the values (replacing auto with something like 500px, or 80% or whatever.

Next, the code to add the video to the page…
That will take the video on the url, autoplay and loop it.

This works fine on desktop, but on mobile it won't play. That's because Chrome and Safari won't autoplay video with the sound on. To workaround that use this…
Note the "muted" bit. That means the video will autoplay, but there will be no sound. If you need sound on mobile, you will have to remove the autoplay bit and let the user start the video.

now you have some decisions to make: It appears that without the muted bit, a video with the autoplay bit won't just sit and wait for the user to start it on a mobile, it just doesn't work. So, it's either autoplay and muted on everything, or you're going to need to start adding some media queries and serve up a different version of the css depending on the screen size.

Me? I've just gone with no sound on anything, mainly because I'm lazy and like to keep stuff as simple as possible.

By the way, I don't use Grammarly here, this is my one freedom from constant correction ;-)
Be the first to comment!
0 / 1000
1 + 6 = ?