How to Add Media to Web Projects
Adding media to your web project is a great way to make it more engaging! You can upload images, sound, and video to your Web Studio ⎋ project with the Media button, and Web Studio gives you the HTML you need to use them.
Upload Media
-
Sign in to Web Studio ⎋ and open one of your web projects.
-
Select the Media button in the toolbar. You will only see this button on your own projects.
-
In the Media pop-up, select Upload a file and choose a file from your computer. A progress bar shows while the file uploads.
-
When the upload finishes, your file appears in the list with a preview.
Add Media to Your Page
Each file in the Media pop-up comes with ready-to-use HTML.
- Select Copy HTML next to the file.
- Close the pop-up, then paste the code into your HTML pane where you want the media to appear.
- Select Save.
The HTML Web Studio gives you depends on the type of file:
- Images use the
<img>tag:<img src="https://codecraftworks.dev/web/.../assets/mars.png" alt="Mars" /> - Audio uses the
<audio>tag with playback controls:<audio src="..." controls></audio> - Video uses the
<video>tag with playback controls:<video src="..." controls width="480"></video>
Want just the address of the file, for example to use in your CSS (background-image: url(...)) or JavaScript? Select Copy link instead.
alt text from the file name. Update it to describe what is in the picture, so that people using screen readers know what it shows.
Delete Media
Select Delete next to a file to remove it. The file is deleted right away, and any part of your page that uses it will stop showing it.
Accepted Media Types
Files must be smaller than 5 MB and have names shorter than 64 characters. Web Studio accepts these file types:
- PNG images (.png)
- JPEG images (.jpg, .jpeg)
- GIF images (.gif)
- WebP images (.webp)
- MP3 audio (.mp3)
- WAV audio (.wav)
- MP4 video (.mp4)
If a file is too large, has a name that is too long, or is a type Web Studio doesn’t accept, you will see a message explaining why it could not be uploaded.
Using Media From Other Websites
You can also use images and other media that are already online by putting their address in your code. Some websites don’t allow their images to be shown in Web Studio’s live preview, so they may look blank while you are editing but will appear on your published page.