<source>



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>
<html>
  <body>
    <video style="width: 100%; height: 500px" controls>
      <source src="/demo.mp4" type="video/mp4" />
    </video>
  </body>
</html>

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.

media


Example :

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

sizes


Example :

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

src


Example :

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

srcset


Example :

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

type


Example :

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