HTML <source> Tag

The <source> tag is a self closing tag used for specifying multiple media resources on media elements <audio><picture> and <video>.

It is commonly used to serve the same media content in multiple formats supported by different browsers.

The <source> tag is an empty element, It has no end tag.

Example :

<!DOCTYPE html>
    <video style="width: 100%; height: 500px" controls>
      <source src="/demo.mp4" type="video/mp4" />

Attributes of <source> Tag

Attribute Value Explanation
media media_query Specifies the size of the screen.
sizes px Specifies the final rendered width of the image represented by the source.
src url Specifies the URL location of an audio or video file.
srcset url

Specifies the URL location of an image.

Required when <source> used within a <picture> element.

type media_type Specifies the content type of the file to be embedded.


Example :

<source src="/video/demo.avi" media="(min-width:500px)> 


Example :

<source src="/images/demo.jpg" sizes="16x16 64x64"> 


Example :

<source src="/video/demo.avi">


Example :

<source srcset="/images/demo.jpg">


Example :

<source type="video/x-msvideo">