How To Add Multimedia in HTML ( Images,Video,Audio, Youtube videos)
Hello Coders! Welcome to the Codewithrandom blog. Today we learn how to Add Multimedia to Html Code. We learn how to add Images, Video, and Audio, and how to embed YouTube videos in your website Using HTML.
Important Require to add Multimedia:
- <img> – for adding the images using html.
- <video> – for adding videos using html.
- <audio> – for adding audio using html.
- <iframe> – to create different sections inside for youtube and more multimedia.
1. How to add Images 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 the 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">
Do you want to learn HTML to React? 🔥
Get your eBook now! 👇
2. How to add a video to HTML
We add a video tag for inserting videos into our HTML web page. We have many attributes in the video tag. 1st tag is the source tag in this source tag we insert the file path in src attributes and we have type attributes so we give mp4/Ogg.
Video tag is used to add the video inside the website and using the video tag we can add multiple videos inside a website.
Code of How to add a video to HTML
<video width="320" height="240" src="./Cwr.mp4"></video>
- There is a screenshot of our video on a web page we have a 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.The <audio> element is used to include audio streams, such as music, in a document. One or more <source> tags with various audio sources are included in the audio> component.
Code of How to add audio to HTML
<audio controls> <source src="./random.mp3" type="audio/ogg"> </audio>
4. How to add Youtube videos to HTML
Adding YouTube video in HTML is also multimedia so first we go 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>
In this post, we learn how to add multimedia to HTML, like images, videos, and audio also learn to embed YouTube videos in HTML with simple coding. If we did a mistake or any confusion please drop a comment to give a reply or help you in easy learning.
In this blog post, we will discuss How To Add Multimedia To HTML with complete source code so you can just copy and paste them into your own project.
Happy exploring and learning !!!
written by – code with random/Anki
Which property is used to embed a YouTube video on a website?
The <iframe> tag combined with a source link is used to insert a YouTube movie inside of any website.
What is the purpose of adding multimedia in any website?
To make websites more interactive and to improve user experience, multimedia is added to them.