Audio and Video HTML Tutorial – Learn how to add sound effects, videos and Youtube videos to your website
Tags: javascript, beginners, html, webdev
Published: 2022-11-26 16:32:55

Is it possible to embed audio and video files into web pages without using Flash or other plugins?

HTML5 is a new standard for creating websites and apps. It was developed by the World Wide Web Consortium (W3C) and aims to provide developers with better tools for building cross-platform applications. The W3C has also created a specification called Web Audio API that allows developers to create interactive audio experiences within their sites.

Audio files, as well as video files, are now part of HTML5, allowing you to add audio content and videos to your site without having to rely on external plug-ins. This means that you don’t need to download additional software to play music or listen to podcasts. Just some custom controls are enough to add the media.

## 1)- Video
In HTML, to add a video to your website all you have to do is use the `<video></video>` tag.

Let’s take a simple HTML page with only a heading and a video.

The code is:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofoc9xfrf4wrfikupdow.PNG)
Inside the `<video></video>` tag we added the `<source></source>` tag.

The `<source></source>` tag is used to specify which video should be displayed, or in other words, to determine the source element of the video.

For that, the `<source></source>` tag accepts one essential attribute which is the **src** attribute. The **src** attribute is the one that takes in the name of the video we want to display plus the extension of the video.

Another attribute can be added to determine the **type** of the video, this attribute is type but it is optional.

So in the browser we have:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpkqew8srbe0s2pongpl.PNG)

As you can see here, the video is now added to the browser. But there are 2 main problems here:

The first problem is that the video is taking up too much space, and the second problem is that there are no controls. So if we want to play the video or pause it or turn up the volume, we can’t.

Let’s see how to fix these problems.

For the first one, regarding the width of the video, we will just set a width using CSS. You can also set a height if you want , but in this example, we will add a width only:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8sup8xm7k83h7uytc5r.PNG)
So the video now looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3alp93lugaddgndhkcfy.PNG)

Now, let’s solve the second problem, which is to add the video controls.

To add video controls simply we will add the controls attribute inside the `<video></video>` tag like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h131hsdbms3a7s5i327d.PNG)
So the video now becomes:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aujdq489hdpqoat7ewlz.PNG)
As you have noticed at the bottom of the video you have now this bar where you can play, pause the video, turn up the volume(volume controls)…

There are other attributes you can add to the `<video></video>` tag to have more control over the video.

**a)- muted**

To play the video without any sound the muted attribute should be added like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/any0opjhrqsarygh14d8.PNG)

Now if you refresh the browser and play the video, you will see that the sound is muted.

**b)- autoplay**

**autoplay** attribute makes the video play automatically when the page is displayed. However, there are some “autoplay policies”: Recently, many browsers allow the video to be automatically played only if it is muted, and that is because when the user loads the page and the video is suddenly played the sound can be annoying. So to counter this problem, browsers now authorize the video to be played automatically if the sound is muted. Which is the case for Chrome autoplay policies for example.

The code is:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfp8gagysu5ts24rgkqr.PNG)

Now if you refresh the page you will see that the video plays on the page load.

**c)- loop**

To play the video again and again in a loop you can add the loop attribute.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvh0xp5jk7zneboxsqen.PNG)

Now if you refresh the page and play the video, at the end you will see that the video will be played once again automatically, you don’t have to do anything.

That makes the video playback easy.

**d)- poster**

poster attribute allows us to add an image to the video that will be shown as long as the video is not played yet or while the video is downloading.

It is like a thumbnail for Youtube videos for example.

Let’s say that for this video I want an image of a dog to be shown.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kpahaqnuery8s2ur2zv.PNG)

In the browser we have:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dp504saihz6qu09hdvi.PNG)

So as you can see, as long as the user does not hit the play button, the dog picture will be shown. But if the user plays the video, then the dog picture will disappear.

## 2)- Audio

To add an audio to the HTML page we’ll use the same code we used to add a video, except this time instead of using `<video></video>` tag we’ll use `<audio></audio>` .

So the code is:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9nbuvqhfykxy4p1uv6o.PNG)

Here the **src** attribute takes in the audio source.

And the type attribute gives more information about the type of the audio file. So if the audio was an MP3 file for example, we would have added **type=audio/mpeg**.

The **type** attribute changes according to the type of the file formats

Now if you refresh the browser you will not see anything, and that is because to display the audio elements we need to add the controls.

So to add audio controls we’ll use the **controls** attribute.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7pchaiutia8tznxvpq2.PNG)

Now we can see the audio file add to the browser:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf1nuilzqok7rbdsx6ur.PNG)

As for `<video></video>` tag, we can use the same attributes to have more control over the audio file.

**a)- muted**

To play the audio without any sound the attribute muted should be added like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gageqt7pjnt6v09ynuad.PNG)

If you refresh the browser and play the audio, you will notice that the sound is now muted.

**b)- autoplay**

Audio autoplay attribute makes the audio play automatically when the page is displayed. However if you use Chrome, you will not be able to get the audio displayed automatically even if it is muted, and that is because Chrome has forbidden this.

But, if you try with Firefox, you will see that the audio can be played automatically if it is muted.

So the code is:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n27giz9op164jfdlnbxx.PNG)

So the muted autoplay audio works well in Firefox.

**c)- loop**

To play the audio again and again in a loop you can add the loop attribute.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kwub8ecfoo358gkvm8y.PNG)

You can refresh the browser and see that the audio will be played again and again in a loop.

That makes the audio playback easy.

## 3)- YouTube video

Sometimes instead of adding a video directly to the web page, it would be better if we upload it to YouTube first and then add the link to the video to the web page. This will help avoid slowing down the loading of the web page and giving the user a bad experience.

So to insert a YouTube video all we have to do is to use the `<iframe></iframe>` tag.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0dezy4pppaxqjxoz97p.PNG)
The **src** attribute accepts the link to the YouTube video we want to add to our website.

However, if you notice, the link of the YouTube video is not a “**watch**” link, but it is an “**embed**” link. Because inside the link there is this “**/embed/**” keyword.

So where can we find this “**embed**” link?

Simply by going to the YouTube video of your choice and click on the **Share** button.

When you click on the **share** button you will have this box of choices you can choose from, either you can share the video via WhatsApp or Facebook or Twitter…But you will also have at the beginning the “**Embed**” button like below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxd6w47xz0tk7fb8ccvu.PNG)

So now if you click on the “**Embed**” button you will have this window:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h765zlv5fobk028s8sh8.PNG)

So now you will see on the right the `<iframe></iframe>` tag we’re learning about in this tutorial.

This is how YouTube inserts the videos and this is exactly what we will do.

So if you want you can either copy/paste the `<iframe></iframe>` tag as it is to your code editor and you’re ready to go.

Or if you don’t want all the attributes that are inside the <`iframe></iframe>` tag then you can just copy the “**embed**” link as below and paste it to your code editor:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swyk2zukdfld2r71ah57.PNG)

So in the browser we have:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry3tdsu1zzqvofcegwo8.PNG)
You can of course adjust the width and the height of the video either by adding the width and height attributes inside the `<iframe></iframe>` tag, But the best practice is to keep HTML separated from CSS, so we will do that through CSS:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf2o0zbj7lqnlqgr5ixx.PNG)
So now we have a bigger video on the screen:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glbv53bjjw0up8iquibv.PNG)
Let’s see some attributes that we can use to have more control over the video.

**a)- allowfullscreen**

To display the video full screen there is an attribute for that, and that is **allowfullscreen**.

If we add the “**embed**” link only without this attribute then this feature below will be disabled.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltexb63w1e9bruh53b1r.PNG)
But if we add the **allowfullscreen** attribute then the feature will be enabled.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tx4nr25m2fi52fe0ily.PNG)
Now if we refresh we’ll have:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1r5kt0q4mgjf3uepwan.PNG)

This is the full screen video Mode.

**b)- mute**

To make the video muted we’ll use the **mute** attribute.

The **mute** attribute is added inside the link, and it is given a value of 1.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7nsjgbc12vjus4cw91u.PNG)

If you refresh the browser and play the video, you will see that the sound is muted now.

**c)- autoplay**

To play the video automatically it should be muted first.

The attribute that will help us to play the video automatically is **autoplay**.

This attribute will also be added to the link and given a value of 1.

The **mute** and **autoplay** attributes will be separated by an ampersand “&”.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7w8qgbm28c6i9wa54at.PNG)

Now if you refresh the browser, the video will start playing with a muted sound.

**d)- loop**

If you want to play the video over and over again, then **loop** attribute will help you do that.

However, this attribute will not be added directly after the link like **mute** and **autoplay** attributes.

The syntax will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nosil17cawqqjatqcmeg.PNG)

As you notice, we added the “**playlist**” keyword first and we set the value of this keyword to the exact string value that comes after “**embed/**“, and then we added an ampersand “&” and the **loop** attribute.

You can refresh the browser and see that the video will be played in a loop.

**e)- controls**

To display the video without any **controls** you can use the controls attribute and set the value to 0.

The default value of the **controls** attribute is 1.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j87raay31fdqw8068qd6.PNG)

## 4)- Conclusion

Adding sound files and videos to the web page enhances the user experience.

In this tutorial we’ve seen how to add these media to a website using different tags and default controls and attributes to have more control over the elements.

We can add different audio formats and sound content to the website using audio tags.

We can add a video directly to the website or through YouTube as well as some features using the video elements attributes.

## Read More

[tables in HTML](https://purpose-code.com/tables-in-html/)

[How to make a dropdown list in HTML?](https://purpose-code.com/how-to-make-a-dropdown-list-in-html/)

[Make forms with HTML](https://purpose-code.com/make-forms-with-html/)

[How to make a navigation bar?](https://purpose-code.com/how-to-make-a-navigation-bar/)

[HTML ordered and unordered lists](https://purpose-code.com/html-lists/)