HTML TUTORIAL FOR BEGINNERS PART 9

Table of contents

  • Audio 🎶🎵
  • Video 🎬📽
  • Embedding📎

Audio 🔊🎶

YouTube is one of the largest and famous video sharing platform.
Now you may wonder how to add video and audio in a website.
It’s super easy like adding images into a website.
Look at the below Example:
```
<audio controls loop muted>
<source src="..." type="audio/mp3" type="audio/ogg">
</audio>
```
Audio has some attributes like👇
* controls
* loop
* muted

Controls attribute displays play button and speaker icon and audio duration.
Loop attribute plays audio continuously.
Muted attribute mutes the audio by default.
Inside audio source element comes.
Source element has some attributes like👇
* src
* type
* srcset

#### Video🎬📽
Video is like audio but video has two more attributes than video like👇
* autoplay
* poster

Autoplay attribute plays video when the web page is loaded.
Poster is an overlay at the beginning of video.
Look at the video Examples below 👇
```
<video controls muted loop autoplay poster="...">
<source src="..." type="video/mp4" type="video/ogg">
</video>
```
Nowadays there lots of video formats like👇

* mp4
* webm
* mp
* mp2
* avi
* mpeg
* mov
* qt

And many more.
Modern browsers support variety types of videos.
As well lots of audio formats available in today’s world, modern browsers support them.
Embedding
Embedding means displaying external content or posts into our website.
In HTML we use `iframe` and `embed` elements.
An example from YouTube
```
<iframe width="344" height="194" src="https://www.youtube.com/embed/R_dwUR2HbZM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
Beside YouTube Tiktok, Twitter, Instagram allow us to embed their posts and contents.

Hope you enjoy the story.
Please don't forget to like and share.

--

--

--

I am a web developer who writes web development content for you to make web development easier

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to make a cryptocurrency Telegram bot with Rust and Teloxide

Business Analysis or Business Analyst — what’s needed in the Scrum Team

Plan the unplannable with Tetromino: a way to deliver innovation in the face of high uncertainty

Learn AWS Lambda in 5 minutes

PLAYZ NFT Staking Continuation Event

Get Lucky. Go Easy

An eSP32 encased in a paper envelop — running a program that displays the phrases “Get Lucky,” and “Go Easy” in pink and white text.

ABC’s Of Client-Server Architecture (Bonus :-Included Implementation)

Re Re Re Recursion

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmadullahnikzad

Ahmadullahnikzad

I am a web developer who writes web development content for you to make web development easier

More from Medium

Progressive Web App(PWA)

Overcoming the fear of CSS — Beginner perspective

Austin Coding Academy — Day 1