We can control <video> and <audio> elements natively now with the availability of JavaScript APIs, without needing to rely on outdated plugins like Flash and Silverlight.
You can place a paragraph inside the video tags, as fallback content, in case the browser accessing the page doesn’t support the video element. This is important for accessibility for older brosers.
Similar to an img element, we need the scr attribute to be used to describe the path to the video file location.
The controls are for controlling the video and audio playback through the JavaScript API.
A Short Fictional Story…
Aey was born from the audio codec, and Bey was born from the video codec. They both found themselves in a MP4 container. The video Bey was preloaded with auto, which buffered him up. The Aey audio was muted. One day they added captions so that Aey’s audio could still be read. This way they lived in their package happily ever after.
Previously we did not have great tools for structuring layout nicely for an HTML page with CSS. Flexbox is only one-dimensional, while grid is 2-dimensional, meaning we can move items up, down, left, and right.
The grid container is where we describe the grid using display: grid. It is the parent of all grid items.
The grid items are children of the grid container (direct decendants).
The grid cells are single units of the grid separated by grid lines. A grid area is a total space made up of grid cells, surrounded by grid lines.
We want to use cropped or differnet sized images for different browser screen sizes.
We can use srcset and sizes to reference multiple images for a specific sized browser screen.