Project Description
This project was really challenging because I got to use different software tools to integrate a video into a webpage. By writing code, I was able to adjust the design and functionality of the video, including adding subtitles. It was a great learning experience, and it helped me understand how coding can enhance both the appearance and usability of a web element like a video.
I found it particularly interesting this project because it was my first time using CodeSandbox. The goal of the project was to embed a video on a webpage and, what made it even more challenging, to add subtitles (captions) to the video to make it accessible to a wider audience.
To achieve this, I used HTML5 for the basic page structure and the <video> tag to embed the video. For the subtitles, I used the VTT format (WebVTT), ensuring they were properly synchronized with the content of the video. The most technical aspect was making sure the code was correctly implemented and worked well across different platforms.
Using CodeSandbox.io was key to this project, as it allowed me to upload the site and perform real-time tests to ensure the code worked properly. This online development environment made it much easier to experiment and fine-tune the details, ensuring that both the video and the subtitles displayed correctly.
This project not only taught me how to integrate videos into a webpage, but also helped me improve my skills with modern development tools like CodeSandbox, which was a valuable addition to my skillset as a web designer.
Technical Sheet
Embed a video into a webpage and add subtitles (captions) for accessibility, using HTML5 <video> tag and WebVTT (Video Text Tracks) format for the subtitles.
- CodeSandbox: An online IDE to write, test, and share web development projects.
- HTML5: For creating the webpage and embedding the video.
- Captions.vtt (.vtt): Format used for video subtitles.