How to add multimedia to html

by







 How to add multimedia to HTML

Hello, guy’s welcome to code with random blog, today we learn how to add multimedia to Html, in multimedia we learn how to add images, video, audio, and how to embed YouTube videos in your website.


1. how to add  image to HTML

We add images in HTML using image tag, image tag used for insert image in HTML so we have 2 attributes in image tags 1tag is file tag is src=”” Where we insert file path for insert image and 2tag is alt=”” Alt tag is used for backup image tags if the image did not load for weak internet connection so alt text appears.
Code of How to add an image to HTML 

   <img src="./cwr.png" alt="codewithrandom">

Output

how to add image to HTML

2. How to add a video to HTML 

We add a video tag for inserting videos in our HTML web page. We have many attributes in the video tag. 1st tag is the source tag in this source tag we insert file path in src attributes and we have type attributes so we give mp4/Ogg.


Code of How to add a video to HTML 

  <video width="320" height="240" src="./Cwr.mp4"></video>

output

How to add a video to HTML


There is a screenshot of our video on a web page we have few more tags to control our video.
Autoplay- video start automatically when we use Autoplay attributes in our video tag.
Control – control tag gives play/pause and some other control to our video on the webpage.

3. How to add audio to HTML 

We add audio to our webpage using a simple audio tag this tag is very similar to an HTML video tag.
Code of How to add audio to HTML 


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

output

How to add audio to HTML


Basically, we use an audio tag and easily put it into src but for better understanding, we use the source in our audio Or video tag. Also, we here define our audio type, and here is our music/audio ready to see on the web page. Also, we use the control tag that we use in our video tag for control so as we use in audio for play/pause control and music volume up/down.

4. How to add  Youtube video to HTML 

Adding YouTube video in HTML is also multimedia so first we going to youTube and copy any video link and let’s create an iframe tag I know it’s the new tag for some Beginners I am also a Beginners so create an iframe tag inside just define width & heights and use src=”” tag and paste youTube video link that’s it.
Code of How to add a youtube video to HTML 


  <iframe width="560" height="315" src="https://www.youtube.com/embed/Pi17hHq81D0" ></iframe>

output

How to add Youtube video to HTML

 

In this post we learn how to add multimedia to HTML, like images, videos, audio also learn to embed youTube videos in HTML with simple coding. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.
written by – code with random/Anki 

Share on:

Leave a Comment