Just like images, videos transform the way the web works. They summarise much content for us with just a single video. To embed videos in a web page, lets break down the snippet below (focus on code inside the body element)
See the Pen Videos by bmutebi (@bmutebi) on CodePen.
We use a <video> element to embed videos like in the snippet above. The opening video tag has attributes like autoplay, loop and controls. If autoplay is enabled, the video automatically plays when the page is loaded. Loop means the videos plays over and over again each time it finishes. The controls attribute provides the user with controls for pausing and playing the video.
Inside the video element, we have a self-closing <source> element that has src attribute. Remember what the src does in the <img>element🤔. It is where we write the name of the video or URL of the video (if the video is on another website like for our case in the snippet above). If the video is on your computer, put it inside your project folder and just use its name inside the src attribute e.g. if my video is called chronicles.mp4—chronicles is the name of the video and the type of the video is mp4, then the code will look like this:
<video autoplay controls>
<source src="chronicles.mp4">
</video>That is all for videos for now. Give it a try on your favorite video 😌
