{"id":11403,"date":"2026-05-27T08:30:59","date_gmt":"2026-05-27T08:30:59","guid":{"rendered":"https:\/\/www.web-ai-institute.com\/wp\/2026\/05\/27\/video-audio-media-in-html-sigma-web-development-course-tutorial-10\/"},"modified":"2026-05-27T08:31:00","modified_gmt":"2026-05-27T08:31:00","slug":"video-audio-media-in-html-sigma-web-development-course-tutorial-10","status":"publish","type":"post","link":"https:\/\/www.web-ai-institute.com\/wp\/2026\/05\/27\/video-audio-media-in-html-sigma-web-development-course-tutorial-10\/","title":{"rendered":"Video, Audio &#038; Media in HTML | Sigma Web Development Course &#8211; Tutorial #10"},"content":{"rendered":"<p><iframe loading=\"lazy\"  width=\"800\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/XZwBNDGuWGU?modestbranding=1\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<br \/>Latest Udemy Web dev Course With Certificate: https:\/\/goharry.in\/webdev<br \/>\nAccess the web development course playlist: https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9agq5TrH9XLIKQvv0iaF2X3w<br \/>\n\u27a1\ufe0f Source Code: https:\/\/github.com\/CodeWithHarry\/Sigma-Web-Dev-Course<br \/>\n\u27a1\ufe0f Notes and CheatSheets: https:\/\/www.codewithharry.com\/notes\/<br \/>\n\u27a1\ufe0f We are working on the Subtitles and will upload them soon!<\/p>\n<p>TimeStamps \u231a<br \/>\n0:00 &#8211; Introduction<br \/>\n0:35 &#8211; Intro<br \/>\n0:45 &#8211; Setting Up the Workspace<br \/>\n0:57 &#8211; Topic Overview: Video, Audio, Media<br \/>\n1:06 &#8211; The Video Tag and Attributes<br \/>\n1:12 &#8211; SRC Attribute and Video Sizing<br \/>\n1:19 &#8211; Making Video Responsive<br \/>\n2:00 &#8211; Video Controls<br \/>\n2:29 &#8211; Download, Full-screen, and Mute Options<br \/>\n3:11 &#8211; AutoPlay Attribute<br \/>\n3:15 &#8211; Removing AutoPlay<br \/>\n3:28 &#8211; Loop Attribute<br \/>\n3:42 &#8211; Muted Attribute<br \/>\n4:26 &#8211; Poster Attribute<br \/>\n4:41 &#8211; Dimensions: Width and Height<br \/>\n5:13 &#8211; Introduction to Audio<br \/>\n6:20 &#8211; Looping Audio<br \/>\n6:54 &#8211; Repeat Feature for MP3<br \/>\n7:42 &#8211; Preload Attribute<br \/>\n14:00 &#8211; Sigma Outro  <\/p>\n<p>\u25baCheckout my English channel here: https:\/\/www.youtube.com\/channel\/UC7btqG2Ww0_2LwuQxpvo2HQ<br \/>\n\u25baInstagram: www.instagram.com\/codewithharry<\/p>\n<p>python, C, C++, Java, JavaScript and Other Cheatsheets [++]:<br \/>\nPlaylist: https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9agrsRZjFECeFuWY5ev2pQlk<\/p>\n<p>\u25baLearn in One Video[++]:<br \/>\nPython Course with 5 Projects: https:\/\/www.youtube.com\/watch?v=fqF9M92jzUo<br \/>\nPython[15 Hr]: https:\/\/www.youtube.com\/watch?v=gfDE2a7MKjA&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nPython Advance[3.5 Hr]: https:\/\/www.youtube.com\/watch?v=61a7UkDO50s&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nPython[1 Hr]: https:\/\/www.youtube.com\/watch?v=qHJjMvHLJdg&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nPython[2 Hr]: https:\/\/www.youtube.com\/watch?v=ihk_Xglr164&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nphp[Project]- https:\/\/www.youtube.com\/watch?v=-al2bECumKg&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nHTML[30 Min]:https:\/\/www.youtube.com\/watch?v=E3ByCRqE7Lo&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nCSS[8.5 Hr]:https:\/\/www.youtube.com\/watch?v=Edsxf_NBFrw&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nCSS[1.4 Hr]:https:\/\/www.youtube.com\/watch?v=u5-K_ua9sOw&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nWordpress[3.2 Hr]:https:\/\/www.youtube.com\/watch?v=GlLRYml8mCY&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nAngular[2 Hr]:https:\/\/www.youtube.com\/watch?v=0LhBvp8qpro&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nJava[2.3 Hr]:https:\/\/www.youtube.com\/watch?v=rV_3Lewxx6o&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nWeb Scraping[1 Hr]:https:\/\/www.youtube.com\/watch?v=uufDGjTuq34&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nMongoDB[2 Hr]:https:\/\/www.youtube.com\/watch?v=oSIv-E60NiU&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nNumpy[1 Hr]:https:\/\/www.youtube.com\/watch?v=Rbh1rieb3zc&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nAndroid Dev[12 Hr]- https:\/\/www.youtube.com\/watch?v=mXjZQX3UzOs<br \/>\nLinux[1 Hr]:https:\/\/www.youtube.com\/watch?v=_tCY-c-sPZc&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nJQuery[1.1 Hr]:https:\/\/www.youtube.com\/watch?v=YFlx1C8XwR0&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<br \/>\nGit and GitHub[1.1 Hr]:https:\/\/www.youtube.com\/watch?v=gwWKnnCMQ5c&#038;list=PLu0W_9lII9ahKZ42vg2w9ERPmShYbYAB7<\/p>\n<p>\u25baComplete course :<br \/>\nReact: https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt<br \/>\nPython-https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9agICnT8t4iYVSZ3eykIAOME<br \/>\nOOP Python-https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9ahfRrhFcoB-4lpp9YaBmdCP<br \/>\nJava:https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9agS67Uits0UnJyrYiXhDS6q<br \/>\nJavaScript- https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9ajyk081To1Cbt2eI5913SsL<br \/>\nPHP-https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9aikXkRE0WxDt1vozo3hnmtR<br \/>\nC-https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9aiXlHcLx-mDH1Qul38wD3aR<br \/>\nC++-https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9agpFUAlPFe_VNSlXW5uE0YL<br \/>\nGit &#038; GitHub-https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9ahVQekD7ePHmnirTePXwIln<br \/>\nAndroid Dev- https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9aiL0kysYlfSOUgY5rNlOhUd<br \/>\nPython GUI- https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9ajLcqRcj4PoEihkukF_OTzA<br \/>\nWeb Development- https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg<br \/>\nPython Django:https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9ah7DDtYtflgwMwpT3xmjXY9<br \/>\nProjects Using HTML, CSS &#038; Javascript- https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9aiQiOwthuSvinxoflmhRxM3<br \/>\nData Structure and Algo:https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9ahIappRPN0MCAgtOu3lQjQi <\/p>\n<p>Follow Me On Social Media<br \/>\n\u25baWebsite (created using Django Rest &#038; Angular): https:\/\/www.codewithharry.com<br \/>\n\u25baFacebook: https:\/\/www.facebook.com\/CodeWithHarry<br \/>\n\u25baInstagram: https:\/\/www.instagram.com\/codewithharry\/<br \/>\nTwitter: https:\/\/twitter.com\/CodeWithHarry<br \/>\nComment &#8220;#HarryBhai&#8221; if you read this \ud83d\ude09\ud83d\ude09<br \/>\n<br \/><a href=\"https:\/\/www.youtube.com\/watch?v=XZwBNDGuWGU\">source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Latest Udemy Web dev Course With Certificate: https:\/\/goharry.in\/webdev Access the web development course playlist: https:\/\/www.youtube.com\/playlist?list=PLu0W_9lII9agq5TrH9XLIKQvv0iaF2X3w \u27a1\ufe0f Source Code: https:\/\/github.com\/CodeWithHarry\/Sigma-Web-Dev-Course \u27a1\ufe0f Notes and CheatSheets: https:\/\/www.codewithharry.com\/notes\/ \u27a1\ufe0f We are working on the Subtitles and will upload them soon! TimeStamps \u231a 0:00 &#8211; Introduction 0:35 &#8211; Intro 0:45 &#8211; Setting Up the Workspace 0:57 &#8211; Topic Overview: Video,&#8230;<\/p>\n","protected":false},"author":998,"featured_media":11404,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[338],"tags":[337,336],"class_list":["post-11403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css-tutorial","tag-html-tutorial"],"_links":{"self":[{"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/posts\/11403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/users\/998"}],"replies":[{"embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/comments?post=11403"}],"version-history":[{"count":1,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/posts\/11403\/revisions"}],"predecessor-version":[{"id":11405,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/posts\/11403\/revisions\/11405"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/media\/11404"}],"wp:attachment":[{"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/media?parent=11403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/categories?post=11403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.web-ai-institute.com\/wp\/wp-json\/wp\/v2\/tags?post=11403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}