How to add video file in HTML, How to add Audio file in HTML, How to Add YouTube Video in HTML

What is Multimedia?

Before knowing how to use multimedia in our webpage you should know what is multimedia. Multimedia came in many different different formates, like Images, Music, audio, video, animation etc. Most of time we need to setup multimedia files in our websites. So today i am going to teach you how you can use multimedia files.

Browser Support

Before web browsers had support for text only and leter came browsers with support for color, fonts and images etc. And audio, video, animation etc files formats have been handled by major browser with third party plug-ins like flash player etc. But HTML5.

How to add video file in HTML

To add video file in your web page you have to use <video> element then add width and height of your video and then add controls.

Example:- 

<video width="320" height="240" controls>
  <source src="filename.mp4" type="video/mp4">  
</video>

Auto play Video in HTML

If you want your video should be autoplay in your web page then you have to add autoplay attribute instead of controls

Example:- 

<video width="320" height="240" autoplay
  <source src="filename.mp4" type="video/mp4">  
</video>

How to add Audio file in HTML

To add audio file in your website you have to add <audio> element as you use <video> element for video file rest will be same.

Example:- 

<audio controls>
  <source src="filename.ogg" type="audio/ogg">
</audio>

Auto-play Audio in HTML

If you want your audio file should play automaticly then you have to add autoplay attribute instead of controls as you did in video file.

How to Add YouTube Video in HTML

If you want add YouTube video in your web page then its very simple to use. First take <iframe> element and inside <iframe> add height width of your video and then add source file.

Example:- 

<iframe width="560" height="315" src="https://www.youtube.com/embed/8YaF2m7hCx0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</body>

framborder:- If you want to change border of your video you can make changes in framborder.
Allow="autoplay":- This attributes allow to play your video automatically.
Allowfulllscreen:- allofullscreen allow you to change your video file size screen.