DEV Community

Visali Nedunchezhian
Visali Nedunchezhian

Posted on

HTML Media

Today we have learnt about HTML media attributes..

The HTML media attribute is used to specify a hint of the media for which the linked resource was designed.

By using the media attribute, you can apply different styles to different devices, screen sizes, or conditions. Its value is a media query, which is default to all if the media attribute is missing.

The media attribute is allowed with an <source> if its parent element is an <picture> element but is not allowed if its parent element is an <audio> or <video> element.

source tag

The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.

The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first <source> it supports.

Attributes

Image description

source tag within picture tag

Use<source> within <picture> to define different images based on the viewport width:

Image description

source tag within video tag

Use <source> within <video> to play a video:

Image description

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.