Have you ever seen Images in Html and CSS projects? Probably as they are a great way to show things and your work and ideas. But have you ever seen a project with videos and audio? My answer would be that I have never seen it on another person’s project! So here’s a tutorial on how to add them to your own project!
Images
You need to open your project and complete any setup you want like backgrounds and mabye a fieldset. After your all set up you need to use the tag img like this and add a new file that is your image and name it something simple then in between the quotation marks put the name AND .whatever file type follows :<img src="example.png">
Enjoy your images and now onto audio!
Audio
Open up your project complete any setup and then import your audio as a file and then rename it to something simple and make sure to note the file type that follows because if you don't put it between the quotation marks with the name then it won't work:<audio src="example.mp3"></audio>
After that you can add either controls:
<audio src="example.mp3" controls ></audio>
Or autoplay loop:
<audio src="example.mp3" autoplay loop>
And now you have audio on your html and css project!
Videos
Now onto videos! After completing any setup needed then you need to import your video and name it to something and also note the file type and then in the quotation marks of this code add the name and file type like I did:<video src="example.mp4"></video>
You can also add an autoplay loop by adding the new code:
<video src="example.mp4" controls autoplay loop ></video>
Please comment links to your amazing creations down below as I would love to see what you make and also if I have made any mistakes on the tutorial please tell me so I can correct it! Thanks for reading!
Was this Helpful?
- Helpful
- Not Helpful
0
voters