{"id":12427,"date":"2020-04-22T15:38:50","date_gmt":"2020-04-22T22:38:50","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=12427"},"modified":"2023-12-01T02:43:13","modified_gmt":"2023-12-01T10:43:13","slug":"embed-video-html","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/embed-video-html\/","title":{"rendered":"Embed Video HTML: A Step-by-Step Guide"},"content":{"rendered":"\n<p><em>You can embed a video in an HTML document using these functions: <\/em><code><em>&lt;video&gt;<\/em><\/code><em>, <\/em><code><em>&lt;object&gt;<\/em><\/code><em>, and <\/em><code><em>&lt;embed&gt;<\/em><\/code><em>. Each works differently, and each uses the <\/em><code><em>src<\/em><\/code><em> attribute to point to the URL of the desired video.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>When you\u2019re creating a web page, you may decide that you want to embed a video in the document. For example, you may be writing a tutorial on how to bake a cake and include a video alongside the recipe.<\/p>\n\n\n\n<p>There are a couple of ways to embed video in an HTML document. In this guide, we\u2019ll cover three ways you can embed a video using these <code>HTML<\/code> functions: using <code>&lt;video&gt;<\/code>, using <code>&lt;object&gt;<\/code>, and using <code>&lt;embed&gt;<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Tag<\/h2>\n\n\n\n<p><code>HTML5<\/code> includes a useful element for embedding video in web pages: <code>&lt;video&gt;<\/code>. While the element does not work in all modern web browsers\u2014it is still somewhat new &#8212; the tag will work in most browsers.<\/p>\n\n\n\n<p>The video element takes in two parameters: the source of your video and the controls you want to use. Here\u2019s the syntax for the embed video <code>HTML<\/code> <code>&lt;video&gt;<\/code> tag:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;video controls=\"controls\" src=\"videos\/ourVideo.mp4\"&gt;\n\tThis browser does not support the video element.\n&lt;\/video&gt;<\/pre><\/div>\n\n\n\n<p>In the above example, we use the <code>src<\/code> attribute to reference the video at <code>videos\/ourVideo.mp4<\/code>. We also tell the browser to utilize the default set of controls that comes with it using the <code>controls<\/code> attribute. The text within our <code>&lt;video&gt;<\/code> tag will appear if the video cannot render on the web page.<\/p>\n\n\n\n<p>If we wanted to include alternative sources, we could use the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;video controls=\"controls\"&gt;\n\t&lt;source src=\"videos\/ourVideo.mp4\" type=\"video\/mp4\"&gt;\n\t&lt;source src=\"videos\/ourSecondVideo.mp3\" type=\"video\/mp3\"&gt;\n\tThis browser does not support the video element.\n&lt;\/video&gt;<\/pre><\/div>\n\n\n\n<p>Now we\u2019ve inserted a video on our webpage using our source element. Above, we referenced an mp4 and an mp3 resource, but you can use any standard video format in the <code>&lt;video&gt;<\/code> tag.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Embed Tag<\/h2>\n\n\n\n<p>Additionally, you can use the <code>&lt;embed&gt;<\/code> element to embed videos and other multimedia into an <code>HTML<\/code> web page. Here\u2019s an example of an <code>&lt;embed&gt;<\/code> tag being used to reference an Adobe Flash video on a web page:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;embed src=\"videos\/ourVideo.swf\" width=\"600px\" height=\"400px\"&gt;<\/pre><\/div>\n\n\n\n<p>This code renders a Flash video on the webpage. We also used the <code>width<\/code> and <code>height<\/code> parameters to specify the size of our video player. In this case, our video player will render in the size 600&#215;400.<\/p>\n\n\n\n<p>However, if you are referencing a Flash resource, your video may not play. This is because users must have Flash installed and active on their system, and many users don\u2019t.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Object Tag<\/h2>\n\n\n\n<p>We can also utilize an <code>&lt;object&gt;<\/code> tag to embed different types of media into an <code>HTML<\/code> web page. For example, you can use this tag to embed <code>HTML5<\/code> video, audio, Flash resources, or PDF files into your web page. Here\u2019s an example of the <code>&lt;object&gt;<\/code> element being used to embed a video onto a web page:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;object src=\"videos\/ourVideo.mp4\" width=\"600px\" height=\"400px\"&gt;&lt;\/object&gt;<\/pre><\/div>\n\n\n\n<p>Again, users must have Flash installed and active for the <code>&lt;object&gt;<\/code> tag to work. Even if you still want to use <code>&lt;object&gt;<\/code>, consider using the <code>&lt;video&gt;<\/code> element or both for users who don\u2019t have Flash installed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p><code>HTML<\/code> includes three elements that allow you to embed video files into a web page: <code>&lt;video&gt;<\/code>, <code>&lt;object&gt;<\/code>, and <code>&lt;embed&gt;<\/code>. So, if you\u2019re looking to add a video to a webpage, you should make use of these tags. Today, we discussed the use of these tags and their compatibility with browsers and Flash.<\/p>\n\n\n\n<p>Now you\u2019re equipped with the knowledge you need to embed videos on any web page!<\/p>\n","protected":false},"excerpt":{"rendered":"You can embed a video in an HTML document using these functions: &lt;video&gt;, &lt;object&gt;, and &lt;embed&gt;. Each works differently, and each uses the src attribute to point to the URL of the desired video. When you\u2019re creating a web page, you may decide that you want to embed a video in the document. For example,&hellip;","protected":false},"author":240,"featured_media":12429,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-12427","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Embed Video HTML: A Step-by-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn how to embed a video in a web page with HTML using video, object, and embed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/embed-video-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed Video HTML: A Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to embed a video in a web page with HTML using video, object, and embed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/embed-video-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-22T22:38:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:43:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"Embed Video HTML: A Step-by-Step Guide\",\"datePublished\":\"2020-04-22T22:38:50+00:00\",\"dateModified\":\"2023-12-01T10:43:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/\"},\"wordCount\":526,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/embed-video-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/\",\"name\":\"Embed Video HTML: A Step-by-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg\",\"datePublished\":\"2020-04-22T22:38:50+00:00\",\"dateModified\":\"2023-12-01T10:43:13+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Learn how to embed a video in a web page with HTML using video, object, and embed.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/embed-video-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg\",\"width\":1200,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/embed-video-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/careerkarma.com\/blog\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Embed Video HTML: A Step-by-Step Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Embed Video HTML: A Step-by-Step Guide | Career Karma","description":"Learn how to embed a video in a web page with HTML using video, object, and embed.","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:\/\/careerkarma.com\/blog\/embed-video-html\/","og_locale":"en_US","og_type":"article","og_title":"Embed Video HTML: A Step-by-Step Guide","og_description":"Learn how to embed a video in a web page with HTML using video, object, and embed.","og_url":"https:\/\/careerkarma.com\/blog\/embed-video-html\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-22T22:38:50+00:00","article_modified_time":"2023-12-01T10:43:13+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"Embed Video HTML: A Step-by-Step Guide","datePublished":"2020-04-22T22:38:50+00:00","dateModified":"2023-12-01T10:43:13+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/"},"wordCount":526,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/embed-video-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/","url":"https:\/\/careerkarma.com\/blog\/embed-video-html\/","name":"Embed Video HTML: A Step-by-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg","datePublished":"2020-04-22T22:38:50+00:00","dateModified":"2023-12-01T10:43:13+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Learn how to embed a video in a web page with HTML using video, object, and embed.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/embed-video-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/HTML-EMBED-VIDEO.jpg","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/embed-video-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"Embed Video HTML: A Step-by-Step Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/12427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=12427"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/12427\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/12429"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=12427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=12427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=12427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}