{"id":2061,"date":"2020-02-24T10:57:54","date_gmt":"2020-02-24T07:57:54","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=2061"},"modified":"2022-05-05T17:11:03","modified_gmt":"2022-05-05T14:11:03","slug":"using-html-and-javascript-to-manipulate-videos","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/","title":{"rendered":"Using HTML and JavaScript to Manipulate Videos"},"content":{"rendered":"<p>Videos offer an efficient and engaging method of conveying information as well as providing entertainment and visual aids. Subsequently, they are being used increasingly more by organizations and individuals for websites, blogs, and various forms of media in an effort to improve user experience. Videos make up a significant section of internet content and it is therefore important for both amateur and <a href=\"https:\/\/flatlogic.com\/services\/ui-ux-design\">professional software and web designers<\/a> to understand how to manage their video content.&nbsp;<\/p><p>Traditionally, the only way to effectively embed videos onto a webpage was with the use of Adobe Flash. Consumers were required to have the Adobe Flash plugin in order to see videos which most people have but still creates a level of separation. Newer systems such as HTML 5 and <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/09\/top-articles-copy-600x450.png\"  data-excerpt=\"Here is our list of JS articles of 2019. We collected 17 posts with tricks and tips in JavaScript and its frameworks.\" href=\"https:\/\/flatlogic.com\/blog\/17-articles-of-september-2019-to-learn-javascript\/\">JavaScript<\/a> include video proponents that don&#8217;t require a Flash plugin. The HTML 5 has methods to embed a video on a webpage while its properties can be manipulated with JavaScript.&nbsp;<\/p><h2 class=\"wp-block-heading\"><strong>HTML&nbsp;<\/strong><\/h2><p>Video embedment is initiated with the use of the &lt;video> tag. There are then a number of attributes that can be included in the code to adjust the video as preferred. Along with typical controls buttons for volume and progress, these can include options for the height and width of a video, <a href=\"https:\/\/clipchamp.com\/en\/video-editor\/\">making a video<\/a> loop back to the beginning after playback ends, a mute &#8220;true&#8221; or &#8220;false&#8221; option to control the playback sound, an option to display an image or &#8216;poster&#8217; before playback commences and an autoplay option. <\/p><h2 class=\"wp-block-heading\"><strong>JavaScript&nbsp;<\/strong><\/h2><p>The HTML5 &lt;video&gt; tag can be connected with JavaScript from where users can have control of all the same features as well as set up more intricate and complex video settings and user interactions via the mouse and keyboard. JavaScript connects with HTML5 through the Document Object Model (DOM) interface which allows users to translate video information. When writing code instructions for videos with JavaScript, users are advised to use MediaElement which supports media files and streaming content and allows for the control and monitoring of videos and their players.&nbsp;<\/p><h2 class=\"wp-block-heading\"><strong>Managing Videos&nbsp;<\/strong><\/h2><p>Now we know how to embed them and organize playback, let&#8217;s look at how to manage video files.&nbsp;<\/p><ul class=\"wp-block-list\"><li><strong>Responsive Sizing&nbsp;<\/strong><\/li><\/ul><p>Responsive videos follow the same concept as responsive images in that their size is dependent on the format and size of a user&#8217;s device. Such parameters can affect how the video is cropped as well as it&#8217;s quality when played. Whichever way the height and width is limited, videos will always maintain their shape, otherwise known as aspect ratio. Common ratios include the standard 4:3 and Instagram 1:1. If height and width don&#8217;t match the aspect ratio, the extra space will be filled with a background colour.&nbsp; <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><\/p><p>The sizes can be set in two ways. Firstly by setting the width to 100% and the height to auto. This forces the video to expand to the maximum size possible. Alternatively, video controls can be set to max-width which allows videos to be played at a specific size but is more flexible as the width can be reduced if necessary.&nbsp;<\/p><p>&#8220;optimizing the video sizing for various forms of receptacle devices can create a user-friendly and attractive usage of video on a website for all viewers,&#8221; says Tom Harwood web developer at <a href=\"https:\/\/britstudent.com\/\">Britstudent<\/a> and <a href=\"https:\/\/writemyx.com\/\">Writemyx<\/a>.<\/p><ul class=\"wp-block-list\"><li><strong>Text Tracks&nbsp;<\/strong><\/li><\/ul><p>&#8220;A simple solution to making videos more interactive, unique, and accessible to users is to utilize the Text track function,&#8221; says Shauagh O&#8217; Doherty, tech writer at Australia2write and Nextcoursework. Tracks are used to embellish videos with subtitles, captions, and timed descriptions. They are positioned on top of the video using the &lt;track&gt; tag. Specific languages can be selected, and multiple tracks and types can be included in one video.&nbsp;<\/p><ul class=\"wp-block-list\"><li><strong>Format&nbsp;<\/strong><\/li><\/ul><p>Maybe the most important aspect of video embedment and embellishment is the format features. The wrong format can prevent a video from being played on a specific device. Designers should use a preferred format and a backup format to ensure playability on a range of devices. They do this by defining the &lt;source&gt; of the video which acts as the default, followed by extra &lt;source&gt; tags that provide the backups.&nbsp;<\/p><h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2><p>Managing videos with HTML 5 and JavaScript need not be as complicated as many users first assume. The specific tags may take some practice to become comfortable with but with practice, coders will be embedding videos with ease and without the need for Flash.&nbsp;<\/p><p><em>Michael Dehoyos is a marketing expert who imparts his expertise as a content marketer and editor at <\/em><a href=\"https:\/\/phdkingdom.com\/\"><em>Phdkingdom<\/em><\/a><em> and <\/em><a href=\"https:\/\/academicbrits.com\/\"><em>Academicbrits<\/em><\/a><em> while contributing writing to numerous sites and publications including <\/em><a href=\"https:\/\/originwritings.com\/case-study-help\"><em>Originwritings<\/em><\/a><em>. Additionally, he offers marketing consultancy to companies in need of strategy.&nbsp;<\/em><\/p><h2 class=\"wp-block-heading\">You might also like these articles:<\/h2><ul class=\"wp-block-list\"><li> <a href=\"https:\/\/flatlogic.com\/blog\/top-7-react-admin-dashboard-templates\/\">Top 7 React Admin Dashboard Templates<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/how-to-create-react-native-airbnb-like-app\/\">How to Create React Native AirBnB-like App<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/web-and-ui-javascript-frameworks-and-libraries\/\">Web and UI JavaScript Frameworks and Libraries<\/a><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>Videos offer an efficient and engaging method of conveying information as well as providing entertainment and visual aids. Subsequently, they are being used increasingly more by organizations and individuals for&#8230;<\/p>\n","protected":false},"author":15,"featured_media":2064,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"HTML5 video replaces Flash, enabling native embedding and controls without plugins.\nSet width\/height, loop, muted, poster, and autoplay; extend behavior with JavaScript via the DOM.\nMake videos responsive: width 100% with height auto, or use max-width; aspect ratio stays constant.\nEnsure compatibility with multiple source formats; add track elements for captions and languages.","flatlogic_facts":[{"text":"The HTML5 video tag embeds video without requiring the Adobe Flash plugin.","source":""},{"text":"Attributes include loop, muted, poster image, autoplay, plus width and height controls.","source":""},{"text":"JavaScript controls video via the DOM; MediaElement is recommended for control and monitoring.","source":""},{"text":"Responsive sizing: use width 100% with height auto to fill space, or set max-width for flexibility.","source":""},{"text":"Include multiple source tags for fallback formats; add track for subtitles, captions, and timed descriptions.","source":""}],"footnotes":""},"categories":[28],"tags":[283,474,639,54],"class_list":["post-2061","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-data-visualization","tag-frontend-development","tag-html5-video","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using HTML and JavaScript to Manipulate Videos - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"HTML 5 and JavaScript include awesome video proponents that allow us to manipulate videos. This means it doesn&#039;t require a Flash plugin anymore.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using HTML and JavaScript to Manipulate Videos\" \/>\n<meta property=\"og:description\" content=\"HTML 5 and JavaScript include awesome video proponents that allow us to manipulate videos. This means it doesn&#039;t require a Flash plugin anymore.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-24T07:57:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-05T14:11:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/02\/Frame-17.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michael Daineka\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Daineka\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using HTML and JavaScript to Manipulate Videos - Flatlogic Blog","description":"HTML 5 and JavaScript include awesome video proponents that allow us to manipulate videos. This means it doesn't require a Flash plugin anymore.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/","og_locale":"en_US","og_type":"article","og_title":"Using HTML and JavaScript to Manipulate Videos","og_description":"HTML 5 and JavaScript include awesome video proponents that allow us to manipulate videos. This means it doesn't require a Flash plugin anymore.","og_url":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2020-02-24T07:57:54+00:00","article_modified_time":"2022-05-05T14:11:03+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/02\/Frame-17.png","type":"image\/png"}],"author":"Michael Daineka","twitter_card":"summary_large_image","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Michael Daineka","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/"},"author":{"name":"Michael Daineka","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/a58389d73a6e36300154a0522e8fbddb"},"headline":"Using HTML and JavaScript to Manipulate Videos","datePublished":"2020-02-24T07:57:54+00:00","dateModified":"2022-05-05T14:11:03+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/"},"wordCount":826,"commentCount":0,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/02\/Frame-17.png","keywords":["Data Visualization","Frontend Development","HTML5 Video","Javascript"],"articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/","url":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/","name":"Using HTML and JavaScript to Manipulate Videos - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/02\/Frame-17.png","datePublished":"2020-02-24T07:57:54+00:00","dateModified":"2022-05-05T14:11:03+00:00","description":"HTML 5 and JavaScript include awesome video proponents that allow us to manipulate videos. This means it doesn't require a Flash plugin anymore.","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/02\/Frame-17.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/02\/Frame-17.png","width":1600,"height":1200},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/using-html-and-javascript-to-manipulate-videos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using HTML and JavaScript to Manipulate Videos"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/a58389d73a6e36300154a0522e8fbddb","name":"Michael Daineka","sameAs":["Mikhail is the leading software engineer who enjoys resolving programming issues, researching and developing applications remarkably fast. He is only 21, but he\u2019s already established himself as a knowledgeable, caring and considerate specialist. He is also excited about pop culture, digital trends, politics, and technologies. When he's not working, you can find Misha listening to hip-hop music or taking pics of his cute dog. He is an enthusiastic and conscientious programmer who can spend hours working on highly complex tasks."],"url":"https:\/\/flatlogic.com\/blog\/author\/mdaineka\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/2061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=2061"}],"version-history":[{"count":5,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/2061\/revisions"}],"predecessor-version":[{"id":7239,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/2061\/revisions\/7239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/2064"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=2061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=2061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=2061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}