Technical drawing instruction in vocational schools requires learning media that can present materials visually while providing an interactive learning experience. However, the limited use of interactive learning media indicates a gap between the needs of vocational learning and the availability of appropriate instructional resources. Addressing this gap is important because understanding technical drawing requires clear and systematic visualization that actively engages students in the learning process. This study aims to develop web-based instructional videos using Lumi H5P for technical drawing material for 10th-grade students in the Electronics and Communications Technology (TEK) program at SMK Negeri 5 Surabaya and to determine the feasibility and effectiveness of the product on student learning outcomes. The study employed a Research and Development (R&D) method using the 4D development model, consisting of the define, design, develop, and disseminate stages. The product was developed using Canva and enhanced with interactive elements through Lumi H5P. Validation was conducted by subject matter and media experts, while product effectiveness was tested using a quasi-experimental design with a quasi-non-equivalent design involving 72 students divided into control and experimental groups. The validation results indicated feasibility levels of 98% from the subject matter expert and 92% from the media expert, while user trials indicated a highly feasible category. The results of the independent samples t-test showed no significant difference in the pretest, with a Sig. (2-tailed) value of 0.191, whereas a significant difference was found in the posttest, with a Sig. (2-tailed) value of 0.011. These findings indicate that the Lumi H5P web-based instructional video is highly feasible and effective for supporting technical drawing instruction and improving students' learning outcomes. ABSTRAK Pembelajaran gambar teknik di SMK memerlukan media yang mampu menyajikan materi secara visual sekaligus memberikan pengalaman belajar yang interaktif. Namun, penggunaan media pembelajaran yang masih terbatas dan belum optimal dalam memanfaatkan teknologi interaktif menunjukkan adanya kesenjangan antara kebutuhan pembelajaran vokasional dan ketersediaan media yang sesuai. Kondisi tersebut penting untuk diatasi karena pemahaman gambar teknik membutuhkan visualisasi yang jelas, sistematis, dan memungkinkan siswa terlibat aktif dalam proses belajar. Penelitian ini bertujuan untuk mengembangkan video pembelajaran berbasis web menggunakan Lumi H5P pada materi gambar teknik kelas X Teknik Elektronika Komunikasi (TEK) di SMK Negeri 5 Surabaya serta mengetahui kelayakan dan efektivitas produk terhadap hasil belajar siswa. Penelitian menggunakan metode Research and Development (R&D) dengan model pengembangan 4D yang meliputi tahap define, design, develop, dan disseminate. Produk dikembangkan menggunakan Canva dan dilengkapi elemen interaktif melalui Lumi H5P. Validasi dilakukan oleh ahli materi dan ahli media, sedangkan efektivitas produk diuji melalui quasi-experimental dengan desain quasi-non-equivalent pada 72 siswa yang terbagi menjadi kelas kontrol dan kelas eksperimen. Hasil validasi menunjukkan tingkat kelayakan sebesar 98% dari ahli materi dan 92% dari ahli media, sedangkan hasil uji coba pengguna menunjukkan kategori sangat layak. Hasil independent samples t-test menunjukkan tidak terdapat perbedaan signifikan pada pretest dengan nilai Sig. (2-tailed) sebesar 0,191, sedangkan pada posttest terdapat perbedaan signifikan dengan nilai Sig. (2-tailed) sebesar 0,011. Hasil tersebut menunjukkan bahwa video pembelajaran berbasis web Lumi H5P sangat layak dan efektif digunakan untuk mendukung pembelajaran gambar teknik serta meningkatkan hasil belajar siswa.