{"id":2591,"date":"2013-04-08T14:56:27","date_gmt":"2013-04-08T14:56:27","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/04\/08\/using-html-5-to-add-videos\/"},"modified":"2021-08-16T23:15:24","modified_gmt":"2021-08-17T03:15:24","slug":"using-html-5-to-add-videos","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/","title":{"rendered":"Using HTML5 to add videos"},"content":{"rendered":"<p>Now you can embed videos in HTML 5 without any javascript or players set up for your site. The tutorial below will explain the basic syntax for adding a video to your website using the HTML 5 video tag.<\/p>\n<h2>Adding a video with HTML 5<\/h2>\n<p>Below is the HTML 5 syntax to embed a video. You will ned to <a href=\"\/support\/website\/how-to-edit-a-file\/\" target=\"_blank\" title=\"How do I upload a file on my server?\" rel=\"noopener\">upload<\/a> your Ogg, mp4, and WebM videos to a directory in your site. The code sample below shows thee video files in a movies folder.<\/p>\n<pre style=\"margin-left:20px;\">&lt;video width=\"320\" height=\"240\" controls&gt; &lt;source src=\"movies\/movie.mp4\" type=\"video\/mp4\"&gt; &lt;source src=\"movies\/movie.ogv\" type=\"video\/ogv\"&gt; &lt;source src=\"movies\/movie.webm\" type=\"video\/webm\"&gt; Your browser does not support the video tag. &lt;\/video&gt; <\/pre>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png\" rel=\"lightbox-0\"><img decoding=\"async\" width=\"400\" height=\"387\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png\" class=\"optimized-lcp-image\" alt=\"HTML 5 video snapshot\" loading=\"eager\" fetchpriority=\"high\" sizes=\"(max-width: 768px) 100vw, 768px\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png 400w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video-300x290.png 300w\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>When you save the changes and view the page you should see it load like the snapshot to the right.<br style=\"clear: both;\"> <\/p>\n<h2>Browser specific Video formats<\/h2>\n<p>Each browser will render a specific file type. Not all browsers will render the same video format. For example IE and Safari can read mp4s and not the other formats. Below is the File types for each browser.<\/p>\n<p class=\"alert\">If the video is not loading in your browser, most likely the file type is not the correct one. Make sure you have one of each type uploaded to your server and the file path and file MIME type is correct.<\/p>\n<table border=\"0\" class=\"article_table\" width=\"100%\">\n<tr>\n<th colspan=\"2\">\n<div align=\"center\">Supported Video File format per browser<\/div>\n<\/th>\n<\/tr>\n<tr>\n<th width=\"180\">FireFox<\/th>\n<td>WebM, Ogg<\/td>\n<\/tr>\n<tr>\n<th>Chrome<\/th>\n<td>mp4, WebM, Ogg<\/td>\n<\/tr>\n<tr>\n<th>Safari<\/th>\n<td>mp4<\/td>\n<\/tr>\n<tr>\n<th>Opera<\/th>\n<td>WebM, Ogg<\/td>\n<\/tr>\n<tr>\n<th>Internet Explorer<\/th>\n<td>mp4<\/td>\n<\/tr>\n<\/table>\n<p>Now that you know how to insert the HTML5 videos in your webpage, the next tutorial will explain <a href=\"\/support\/website\/html5-video-player\/\">HTML5 Video Player Elements<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Now you can embed videos in HTML 5 without any javascript or players set up for your site. The tutorial below will explain the basic syntax for adding a video to your website using the HTML 5 video tag. Adding a video with HTML 5 Below is the HTML 5 syntax to embed a video.<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/\"> Read More ><\/a><\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4288],"tags":[],"class_list":["post-2591","post","type-post","status-publish","format-standard","hentry","category-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using HTML5 to add videos | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"This article will teach you how to use HTML 5 to add videos to your site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using HTML5 to add videos | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"This article will teach you how to use HTML 5 to add videos to your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-08T14:56:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:15:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\"},\"headline\":\"Using HTML5 to add videos\",\"datePublished\":\"2013-04-08T14:56:27+00:00\",\"dateModified\":\"2021-08-17T03:15:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/\"},\"wordCount\":232,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/\",\"name\":\"Using HTML5 to add videos | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png\",\"datePublished\":\"2013-04-08T14:56:27+00:00\",\"dateModified\":\"2021-08-17T03:15:24+00:00\",\"description\":\"This article will teach you how to use HTML 5 to add videos to your site.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png\",\"width\":400,\"height\":387,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using HTML5 to add videos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\",\"name\":\"InMotion Hosting Contributor\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using HTML5 to add videos | InMotion Hosting","description":"This article will teach you how to use HTML 5 to add videos to your site.","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:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/","og_locale":"en_US","og_type":"article","og_title":"Using HTML5 to add videos | InMotion Hosting","og_description":"This article will teach you how to use HTML 5 to add videos to your site.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-04-08T14:56:27+00:00","article_modified_time":"2021-08-17T03:15:24+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41"},"headline":"Using HTML5 to add videos","datePublished":"2013-04-08T14:56:27+00:00","dateModified":"2021-08-17T03:15:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/"},"wordCount":232,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png","articleSection":["Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/","name":"Using HTML5 to add videos | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png","datePublished":"2013-04-08T14:56:27+00:00","dateModified":"2021-08-17T03:15:24+00:00","description":"This article will teach you how to use HTML 5 to add videos to your site.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/04\/edu_website-design_105_html-5-video_html-5-video.png","width":400,"height":387,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/using-html-5-to-add-videos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Using HTML5 to add videos"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41","name":"InMotion Hosting Contributor","url":"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2591"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2591\/revisions"}],"predecessor-version":[{"id":84691,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2591\/revisions\/84691"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}