This content originally appeared on DEV Community and was authored by Visali Nedunchezhian
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
source tag within picture tag
Use <source> within <picture> to define different images based on the viewport width:
source tag within video tag
Use <source> within <video> to play a video:
This content originally appeared on DEV Community and was authored by Visali Nedunchezhian