reading-notes

Multimedia and Embedding

Video and Audio Content

The video element is used to embed video content in an HTML document.
The audio element is used to embed audio content in an HTML document.
Use the controls attribute to display a control bar for playback.
Use the autoplay attribute to play the video or audio automatically when the page loads.
Use the loop attribute to loop the video or audio.

CSS Grid

CSS Grid Layout is a two-dimensional layout system for the web.
It allows you to create complex layouts that can be rearranged easily.
Grid is used on the parent container with the display: grid property.
Grid uses rows and columns defined with the grid-template-rows and grid-template-columns properties.
Grid items are placed inside the grid with the grid-column and grid-row properties.

Responsive Images

Responsive images are images that are optimized for different screen sizes and resolutions.
The srcset attribute specifies the different image sources for different screen sizes.
The sizes attribute specifies the different image sizes for different screen sizes.
Use the picture element to provide alternative image sources for different scenarios.
Use the loading attribute to control how the browser loads the images.

Images in HTML

The img element is used to embed images in an HTML document.
Use the alt attribute to provide alternative text for the image.
Use the src attribute to specify the source URL of the image.
Use the width and height attributes to specify the size of the image.

Other Embedding Technologies

iframe elements can be used to embed external web pages or documents within an HTML document.
The embed element is used to embed external media, such as videos or audio, within an HTML document.
The object element is used to embed external multimedia content, such as videos or audio, within an HTML document.

Video/audio on the web evolved from plugins to native HTML elements. ‘src’ is the video file URL, ‘controls’ displays playback controls. Fallback content inside