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

Using TwitchLib to Create a Twitch Chat Bot — Part 2

{UPDATE} Играй с приказните герои! Hack Free Resources Generator

How to Get Rid of If-Else Ladder

Simple Operating System using Assembly

The jCenter & Bintray is Shutting Down. Now What?

Reduce your monthly AWS spend by 50%

Racøøn’s gambling platform update

Dissecting the Software Designing Approach of “Design by Contract”

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

Essential chrome extensions for front-end developers

Bootstrap for beginners — Part 2

I will convert psd, xd, figma, sketch to html css bootstrap

All HTML5 Tags with their descriptions/Uses and examples