I have a responsive site that has a blog which shows videos with HTML5.

As of now, I use the following formats:

  1. MP4 HD video - for computer users
  2. MP4 SD video - for mobile users
  3. WebM HD Video - for computer users
  4. WebM SD Video - for mobile users
  5. poster.jpg - poster with width: 640px for all devices.

My HTML5 to select a device is:

<video controls="controls" height="260" poster="poster.jpg" preload="none" width="463">
    <source media="all and (max-width: 480px)" src="video_sd.mp4" type="video/mp4" />
    <source media="all and (max-width: 480px)" src="video_sd.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />

Summarizing, having 4 files of the same video for a responsive site results in approximately 1GB data per video ...

My question is: Am I doing this in right way?

1 Answer 1


Inline CSS

Your code looks OK apart from the fact I'd prefer to use the styling within the CSS rather than inline, that way you can adjust the style according to each device simply using:

video {height:260px;width:463px;} then using media queries within the CSS you can scale the video easier for different devices as the height 260px width 463px doesn't sound too friendly on mobiles.

Bitrate Matters

I'd thought I'd bring this up since you've mentioned that your file sizes are 1gb. While this is not bad it might be if the runtime of these videos are low and I'll explain. To satisfy your target audience with smooth video and less buffering you need to know the average download speed for broadband users and the average down speed for mobile users.

For example... in the UK 3G data average speed is 2mbits so these users will not be able to handle video more than 2000kbps (kilobits per second) so you need to ensure your VBR (Variable Bit-rate) doesn't exceed 2000kbps again... You then repeat this process for the broadband users but with the average for them.

Also depending on the video type you may be able to get away with much lower bitrates.. fast motion video generally requires more bitrate while slow motion you can get away with less. Generally SD won't require more than 900-1000kbps however I recommend taking a look at ripping sites for more information about getting perfect encodes. Most automated encoders do not get the video a perfect size and perfect quality. I call them lazy encoders.

  • Yep, you're right... I even didn't look that inline CSS, just copied. When I said that using this way results in 1Gb per video, I was trying to say that, as a normal site, I have more than 1 video, so it's more or less 1GB per video (4 files * 250MB), so, my host need a considerable size... The best point of question is: using 2 video extensions (.mp4 and .webm), selecting wich video per size of device, is the best way for doing this?
    – fiskolin
    Commented Dec 23, 2013 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.