Home/ Questions/Q 6813215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:32:38+00:00

I’m writing a simple web page using responsive web design, so CSS3 media queries

  • 0

I’m writing a simple web page using responsive web design, so CSS3 media queries to serve different stylesheets based on screen resolution. To keep it simple, let’s say there is an iphone versione and a desktop version. I’m using the html5 video tag to serve videos, and i would like to serve a 720p video when the site is accessed with a desktop and a smaller, 320p video when accessed with an iphone. Am i wrong or there is no easy way to do it just with html/css? Do i have to use javascript to dynamically change the video src attribute? If so, what are the best practices? Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can add the media attribute to the various source elements allowing you to serve up different videos for devices which match media query settings (as linked to by DBUK above).

    For example:

    <video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

    Update – 24.07.2012
    It’s likely that this will be removed from the specification.

    • 0