Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

So, I have a responsive site that has kind of blog to show videos (in html).

For now, I am doing this in

  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 for select a device is actually:

<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, more or less, 1GB per video...

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

share|improve this question

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.

share|improve this answer
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 Dec 23 '13 at 16:29

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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